POSTCSS

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

PostCSS不是什么

  • 尽管表面上它看起来是一个预处理器，其实它不是一个预处理器
  • 尽管表面上它看起来是一个后处理器，其实它也不是一个后处理器
  • 尽管它可以促进、支持未来的语法，其实它不是未来语法
  • 尽管它可以提供清理、优化代码这样的功能，其实它不是清理、优化代码的工具
  • 它不是任何一件事情，这也意味者它潜力无限，你可以根据自己的需要配置你需要的功能

 

PostCSS特别之处

  • 多样化的功能插件，创建了一个生态的插件系统
  • 根据你需要的特性进行模块化
  • 快速编译
  • 创建自己的插件，且具可访问性
  • 可以像普通的CSS一样使用它
  • 不依赖于任何预处理器就具备创建一个库的能力
  • 可以与许多流行工具构建无缝部署

PostCSS.parts

安装使用

结合Gulp

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('src/**/*.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('autoprefixer'), require('precss') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

常用插件

Autoprefixer

Autoprefixer 使用 Can I Use 网站提供的数据来确定所要添加的不同浏览器的前缀。随着浏览器版本的升级，浏览器在新版本中可能已经提供了对标准属性的支持，从而不再需要添加额外的前缀。Autoprefixer 可以配置需要支持的浏览器。如“last 2 versions”表示主流浏览器的最近两个版本，“ie 6-8”表示 IE 6 到 8，“> 1%”表示全球使用率大于 1%的浏览器版本。中给出了配置 Autoprefixer 插件的示例。

require('autoprefixer')({
 browsers: ['last 2 versions']
})

Autoprefixer 除了添加所需要的属性名称前缀之外，还可以移除 CSS 代码中冗余的属性名称前缀。遗留 CSS 代码中可能包含由开发人员手动添加的旧版本的浏览器所支持的带前缀的属性名称。Autoprefixer 默认情况下会移除这些冗余的前缀。可以通过配置对象中的 remove 属性来配置该行为。

MORE

cssnext

Use tomorrow’s CSS syntax, today.

More

CSS module

require('postcss-modules')({
   getJSON: function(cssFileName, json) {
     var cssName = path.basename(cssFileName, '.css');
     var jsonFileName = path.resolve(dist, 'cssModules', cssName + '.js');
     mkdirp.sync(path.dirname(jsonFileName));
     fs.writeFileSync(jsonFileName, "module.exports = " + JSON.stringify(json) + ";");
   }
 })
gulp.task('posthtml', function() {
 var posthtml = require('gulp-posthtml');
 return gulp.src('app/**/*.html')
   .pipe(posthtml([ require('posthtml-css-modules')(path.join(dist, 'cssModules')) ]))
   .pipe(gulp.dest('dist/'));
});

CSS Modules

 

CSS 模块（CSS modules）并不要求使用 BEM 那样复杂的命名规范。每个组件可以自由选择最合适的简单 CSS 类名。组件的 CSS 类名在使用时会被转换成带唯一标识符的形式。这样就避免了名称冲突。在组件开发中可以继续使用简单的 CSS 类名，而不用担心名称冲突问题。中给出了使用 CSS 模块规范的 CSS 代码。样式规则之前的“:global”表示这是一个全局样式声明。其他的样式声明是局部的。

其他插件

开发一个PostCSS插件

每个 PostCSS 插件都是一个 NodeJS 的模块。使用 postcss 的 plugin 方法来定义一个新的插件。插件需要一个名称，一般以“postcss-”作为前缀。插件还需要一个进行初始化的方法。该方法的参数是插件所支持的配置选项，而返回值则是另外一个方法，用来进行实际的处理。该处理方法会接受两个参数，css 代表的是表示 CSS AST 的对象，而 result 代表的是处理结果。中给出了一个简单的 PostCSS 插件。该插件使用 css 对象的 walkDecls 方法来遍历所有的“color”属性声明，并对“color”属性值进行检查。如果属性值为 black，就使用 result 对象的 warn 方法添加一个警告消息。

var postcss = require('postcss');

module.exports = postcss.plugin('postcss-checkcolor', function(options) {
 return function(css, result) {
   css.walkDecls('color', function(decl) {
     if (decl.value == 'black') {
       result.warn('No black color.', {decl: decl});
     }
   });
 };
})

其他CSS辅助工具

myth

POSTCSS

By weiwei ggice

Made with Slides.com

POSTCSS

  • 16

More from weiwei ggice