css插件学习--lostgrid

安装

以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];

参考文档

lostgrid官方文档