安装
以gulp为例
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('autoprefixer'),
lost = require('lost');
var paths = {
cssSource: 'src/css/',
cssDestination: 'dist/css/'
};
gulp.task('styles', function() {
return gulp.src(paths.cssSource + '**/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([
lost(),
autoprefixer()
]))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.cssDestination));
});
gulp.watch(paths.cssSource + '**/*.css', ['styles']);
gulp.task('default', ['styles']);
API
lost-column: 分列
【参数】:比例 [cycle] [间距];
lost-center: 水平居中
【参数】:width [padding] [flex];
lost-align: 对齐方式
【参数】:reset | horizontal | vertical |
top-left | top-center | top | top-right |
middle-left | left |
middle-center | center |
middle-right | right |
bottom-left | bottom-center | bottom | bottom-right
lost-flex-container: flex布局方向
【参数】:row | column;
lost-masonry-wrap: 产生margin负值，抵消外层
【参数】:flex 间距;
lost-masonry-column: 和lost-masonry-wrap一起使用
【参数】:比例 [间距] [flex];
参考文档
