β

使用PostCSS+cssnext来写css

宅前疯 85 阅读

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

PostCSS使用

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

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

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

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

div{
box-sizing:border-box;
}

使用autoprefixer

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

cssnext

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

npm i -g postcss-cssnext

使用

div{
background-color: #333;
}

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

配置文件

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

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

测试test.css文件

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;
}

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

作者:宅前疯
专注于Linux,Java,nodeJs,Web前端
原文地址:使用PostCSS+cssnext来写css, 感谢原作者分享。