麦子学院 2017-07-23 21:54

通过PostCSS自动添加CSS3属性前缀

回复:0 查看:2710

本文和大家分享的主要是使用PostCSS 自动添加 CSS3 属性前缀相关内容，一起来看看吧，希望对待学习CSS3有所帮助。

　　PostCSS 是通过 JS 插件转化 CSS 样式的一个库，这种转化包括但不限于检查 CSS 语法、使用变量和 mixins 、将 CSS 语法转化为浏览器兼容模式（比如常用的添加浏览器厂商前缀）等等。

　　尽管PostCSS 可以当做 CSS 预处理器来使用，就像 SASS 和 LESS 一样，但 PostCSS 能做的远不止如此，因为 PostCSS 的功能是可以通过插件进行扩展的。

　　目前而言，PostCSS 最吸引我的是因为它可以提供 SASS 和 LESS 不能（轻易）完成的功能：给 CSS3 属性添加浏览器厂商前缀，转化 Flex 布局使其兼容 IE10 以下浏览器。

　　如果你习惯使用SASS 语法，同时又想使用 PostCSS 给 CSS3 属性添加前缀，也是可以做到的，这也是本篇文章重点介绍的。

　　如何使用

　　目前流行的使用方式是通过Gulp 或者 Webpack 使用。

　　通过Gulp使用

　　· 简单使用

　　先贴出通过使用 flexibility 插件，转换Flex 语法兼容 IE10 以下浏览器的 gulpfile.js 文件内容：

　　 const gulp = require('gulp');

　　// 引入 PostCSS const postcss = require('gulp-postcss');

　　/**

　　* 通过 require 引入 PostCSS 所需插件，这里除了引入 flexibility

　　gulp.task('css', function (){

　　 return gulp.src('src/main.css')

　　.pipe( postcss([ require('postcss-flexibility') ]) )

　　.pipe( gulp.dest('dist/') );

　　});

　　通过 postcss([ require('postcss-flexibility') ]) 便可以引入 postcss-flexibility 插件对CSS 进行处理了。其中插件列表是一个数组，可以引入多个，比如还想给 CSS3 属性添加前缀可以这样写：

　　 ...

　　.pipe( postcss([ require('postcss-flexibility'), require('autoprefixer') ]) ) ...

　　插件使用前需要先通过npm 进行安装。

　　· 结合 SASS 使用

　　如果已经习惯使用SASS 语法写 CSS ， PostCSS 也可以处理经过 SASS 转化后的 CSS 文件， gulpfile.js 文件配置如下（这里也引入了添加 CSS3 属性前缀的插件）：

　　 const gulp = require('gulp');

　　// 引入 PostCSS const postcss = require('gulp-postcss');

　　// 引入 SASS const sass = require('gulp-sass');

　　/**

　　* 通过 require 引入 PostCSS 所需插件，这里除了引入 flexibility, autoprefixer 插件

　　gulp.task('css', function (){

　　 return gulp.src('src/main.css')

　　.pipe( sass() )

　　.pipe( postcss([ require('postcss-flexibility'), require('autoprefixer') ]) )

　　.pipe( gulp.dest('dist/') );

　　});

来源：Vince