PostCSS一种更优雅、更简单的书写CSS方式_html/css

来源：动视网责编：小采时间：2020-11-27 16:11:23

PostCSS一种更优雅、更简单的书写CSS方式_html/css

PostCSS一种更优雅、更简单的书写CSS方式_html/css_WEB-ITnose:Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include display-flex;} 会得到如下代码: .row { display: -webkit-flex;

推荐度：

点击下载本文 文档为doc格式

导读PostCSS一种更优雅、更简单的书写CSS方式_html/css_WEB-ITnose:Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include display-flex;} 会得到如下代码: .row { display: -webkit-flex;

Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下:

.row { @include display-flex;}

会得到如下代码:

.row { display: -webkit-flex; display: flex;}

但是, 做为一个长期用原生CSS书写方式的CSSer,不太习惯去官方查文档,再以@include方式书写。

那么问题来了,我只能放弃高效率方式么?
其实不然, Autoprefixer能够帮助你。
其实, Autoprefixer也仅仅是PostCSS其一个最出名的插件。
来吧, 来看张图:

这样,以一种原生CSS的书写方式, 然后还可以帮你解决浏览器前缀、IE兼容、以下一代CSS书写方式兼容现在浏览器, 是不是很酷?

哦, 其实应该说更简单、更优雅, 不用查文档, 不用@include。
这个就是Twitter推出的postcss, 据说Google、阿里、Shopify, Twitter就不用说了。

下面看下PostCSS一些基本使用方法:

准备

构建工具为Gulp
基于PostCSS
PostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器
PostCSS插件 Autoprefixer 为CSS补全浏览器前缀
PostCSS插件 CSS Grace 让CSS兼容旧版IE

package.json

{ "name": "postcss usage", "version": "1.0.0", "description": "postcss cssnext", "main": "gulpfile.js", "dependencies": { "autoprefixer": "^5.2.0", "autoprefixer-core": "^5.2.1", "cssgrace": "^2.0.2", "gulp": "^3.9.0", "gulp-less": "^3.0.3" }, "devDependencies": { "autoprefixer": "^5.2.0", "autoprefixer-core": "^5.2.1", "cssgrace": "^2.0.2", "cssnext": "^1.8.4", "gulp-postcss": "^6.0.0", "postcss": "^4.1.16" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "postcss", "gulp" ], "author": "givebest", "license": "ISC"}

gulpfile.js

var gulp = require('gulp');var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');var cssgrace = require('cssgrace');var cssnext = require('cssnext');gulp.task('css', function () { var processors = [ autoprefixer({browsers: ['last 3 version'], 	cascade: false, 	remove: false 	}), cssnext(), cssgrace ]; return gulp.src('./src/css/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dist'));});gulp.task('watch', function(){	gulp.watch('./src/css/*.css', ['css']);});gulp.task('default', ['watch', 'css']);