使用PostCSS+cssnext来写css

PostCSS是使用NodeJs编写的css处理工具,实际上postcss只是工具的骨架,其丰富的插件使其变得强大,著名的autoprefixer插件就是其出品。本文将简单介绍PostCSS的使用以及autoprefixer和cssnext插件。
PostCSS

PostCSS使用

你可以多种方式使用PostCSS,比如webpack、Gulp等,本文为了快速演示使用了CLI的方式,使用之前需要使用npm安装postcss-cli

npm i -g postcss-cli

安装之后就可以受用postcss了,命令格式如下

postcss [input.css] [OPTIONS] [-o|--output output.css] [-w|--watch]

当然,你也可以在命令行下使用

postcss --help

查看帮助,常用如下

postcss test.css //处理完直接打印
postcss test.css -o output.css //处理并输出到output.css
postcss test.css > output.css //处理并输出到output.css

autoprefixer

autoprefixer插件用于为CSS的兼容性而自动添加的前缀,如chrome/safari的前缀-webkit-,firefox的前缀-moz-,首先安装autoprefixer

npm i -g autoprefixer

test.css内容

div{
box-sizing:border-box;
}

使用autoprefixer

postcss test.css -u autoprefixer

其中-u是–use的简写,后跟插件名称,输出

div{
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

cssnext

cssnext能够让你使用下一代css语法,如目前css4还没有各浏览器支持,但可以使用cssnext来把css4的语法翻译成css3。在css4中可以使用变量,如test.css

:root {
--color-gray: #333;
}
div{
background-color: var(--color-gray);
}

其中color-gray为变量,安装cssnext(注意cssnext的插件已经更名为postcss-cssnext了)

npm i -g postcss-cssnext

使用

postcss test.css -u postcss-cssnext

打印输出

div{
background-color: #333;
}

在线使用cssnextmozilla的变量教程阮一峰的变量教程

配置文件

postcss-cli可以用–use参数来使用插件,多个插件的使用方式如

postcss test.css -u autoprefixer postcss-cssnext

但插件必须全局安装,而且如果插件很多或者插件在带有参数就很不方便了,因此postcss-cli可以使用配置文件,默认的配置文件名为postcss-config.js,也可以使用-c或–config来指定配置文件,如postcss-config.js文件内容

const cssnext = require('postcss-cssnext');
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
cssnext(),
autoprefixer()
]
};

测试test.css文件

:root {
--color-gray: #333;
}
div{
box-sizing:border-box;
background-color: var(--color-gray);
}
p:not(:first-child, .special) {
color: red;
}

处理命令

postcss test.css -c postcss.config.js

输出如下

div{
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-color: #333;
}
p:not(:first-child):not(.special) {
color: red;
}

翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!