来自官方的文档上写着的是PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合,转化CSS3的新特性语法、行内图片等。
其中一个比较为人所知的插件AutoPrefixer就是出自这里,目前上面已经超过200多个插件在github。
解决全局CSS问题
postcss-use
to explicitly set PostCSS plugins in CSS and execute them only for the current file.postcss-modules
orreact-css-modules
automatically isolates selectors in components.postcss-autoreset
uses local reset in component, instead of global one.postcss-initial
addsall: initial
support to reset all inherit styles.cq-prolyfill
adds media queries for component size or parent background.
使用最新的CSS特性
autoprefixer
adds vendor prefixes, using data from Can I Use.cssnext
allows you to use future CSS features today (includesautoprefixer
).
更高的CSS可读性
precss
contains plugins for Sass-like features like nesting or mixins.postcss-sorting
sorts rules content with specified order.short
adds and extends numerous shorthand properties.
图片和字体
postcss-assets
inserts image dimensions and inlines files.postcss-sprites
generates image sprites.font-magician
generates all the@font-face
rules needed in CSS.postcss-inline-svg
allows to inline SVG and customize its styles.postcss-write-svg
allows to write simple SVG directly in CSS.
Linters
stylelint
is a modular linter for CSS.doiuse
lints CSS for browser support, using data from Can I Use.colorguard
helps maintain a consistent color palette.
Other
lost
is feature-richcalc()
grid system by Jeet author.cssnano
is a modular CSS minifier.rtlcss
mirrors styles for right-to-left locales.
语法类
PostCSS can transform styles in any syntax, not just CSS.
postcss-scss
to work with SCSS (but does not compile SCSS to CSS).postcss-js
to write styles in JS or transform React Inline Styles, Radium or JSS.postcss-safe-parser
finds and fixes CSS syntax errors.midas
converts a CSS string to highlighted HTML.
相关文章
- Some things you may think about PostCSS… and you might be wrong
- What PostCSS Really Is; What It Really Does
- PostCSS Guides
演示
Autoprefixer
PostCSS最有名的插件是Autoprefixer。如名所示,可以自动为你添加浏览器私有前缀。它的添加值会参考Can I Use及你设定的浏览器支持范围,因此相当可靠。下面是一个示例(以我设定的浏览器支持范围):
.container{
display: flex;
}
编译后:
.container{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
postcss-nested&postcss-mixins
在刚开始使用PostCSS时,我就想到要用PostCSS实现我在Sass中最常用的特性。所以,我找到了postcss-nested
和postcss-mixins
。将它们结合起来后,就可以做到这样:
@define-mixin clearfix{
&:after{
display: table;
clear: both;
content: " ";
}
}
.column-container{
color: #333;
@mixin clearfix;
}
编译后:
.column-container{
color: #333;
}
.column-container:after{
display: table;
clear: both;
content: " ";
}
到这里,你是否已经有了“预编译器可以做到的它也可以做到”的感觉呢?
如何使用PostCSS
我个人推荐结合Gulp使用,本文在此只介绍gulp-postcss的用法。
gulp-postcss
及插件都是npm,首先,使用npm install
将它们分别安装到项目目录中(会位于node_modules
)。然后,编辑glupfile.js
,将PostCSS注册为Gulp的一个任务。以下是一个结合使用了Autoprefixer
、postcss-simple-vars
、postcss-mixins
、postcss-nested
4个插件,且生成source map文件的例子:
var gulp = require("gulp");
var postcss = require("gulp-postcss");
var autoprefixer = require('autoprefixer-core');
var postcssSimpleVars = require("postcss-simple-vars");
var postcssMixins = require("postcss-mixins");
var postcssNested = require("postcss-nested");
var sourcemaps = require("gulp-sourcemaps");
// Css process.
gulp.task("postcss", function(){
var processors = [
postcssMixins,
postcssSimpleVars,
postcssNested,
autoprefixer({
browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
})];
return gulp.src(["./stylesheets/src/*.css"])
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./stylesheets/dest"));
});
在上面这段代码中,processors
是一个数组,定义了用到的PostCSS插件。PostCSS会按照定义顺序依次执行插件,因此,在结合多个插件使用时,请注意它们的位置。
自定义转换
此外,你可以很容易地创建你自己的转换(还记得前面说过PostCSS的插件都是JavaScript函数吧?)。例如,下面是一个自定义的转换方法,它将css代码中的带有rem
单位的值,更改为px
的值。
var custom = function(css, opts){
css.eachDecl(function(decl){
decl.value = decl.value.replace(/\d+rem/, function(str){
return 16 * parseFloat(str) + "px";
});
});
};
然后,你将这个方法直接添加到processors
中(就像postcssMixins
那些那样)就可以使用。如果原来有值是3rem
,将变成48px
。
以上只是一个简单的转换,如果要正式做一个插件,请参考PostCSS插件指南。
参考: