CSS 工作流

CSS 预处理器

• 变量
• 混合(minin) Extend
• 嵌套规则
• 运算
• 函数
• Namespaces & Accessors
• scope
• 注释

CSS 后处理器

• css压缩：clean-css
• 自动加前缀：Autoprefixer（基于postCss）
• css属性排序：CSScomb
• Rework，取代Stylus
• PostCSS

PostCSS 值得收藏的插件

• postcss-custom-properties 运行时变量
• postcss-simple-vars 与 scss 一致的变量实现
• postcss-minins 实现类似 sass 的 @mixin 的功能
• postcss-extend 实现类似 sass 的继承功能
• postcss-import 实现类似 sass 的 import
• cssnext 已被postcss-preset-env取代
• CSS Grace 面向未来

gulp 快速配置上手

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssgrace = require('cssgrace');
var cssnext = require('cssnext');
gulp.task('css', function () {
  var processors = [
  autoprefixer({browsers: ['last 3 version'],
  cascade: false,
  remove: false
  }),
  cssnext(),
  cssgrace
  ];

  return gulp.src('./src/css/*.css')
  .pipe(postcss(processors))
  .pipe(gulp.dest('./dist'))
});
gulp.task('watch', function(){
  gulp.watch('./src/css/*.css', ['css']);
});
gulp.task('default', ['watch', 'css']);

预处理与后处理器的关系

后处理器的特性：CSS原生语法，学习成本低，支持预处理器，完善整个CSS工作流，把逻辑交给JS