跳到主要内容

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