安裝
以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: 分列
【參數(shù)】:比例 [cycle] [間距];
lost-center: 水平居中
【參數(shù)】:width [padding] [flex];
lost-align: 對(duì)齊方式
【參數(shù)】: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布局方向
【參數(shù)】:row | column;
lost-masonry-wrap: 產(chǎn)生margin負(fù)值甘晤，抵消外層
【參數(shù)】:flex 間距;
lost-masonry-column: 和lost-masonry-wrap一起使用
【參數(shù)】:比例 [間距] [flex];
參考文檔
