关于PostCSS的一点小科普_html/css_WEB
PostCSS 起源于2013年9月,发展到现在,已经有很多开发者在工作中使用它。 如果你尚未接触过PostCSS,这篇文章正适合你。
PostCSS 本身很小,其只包含CSS解析器,操作CSS节点树的API,资源生成器(译者注1:原文是source map),以及一个节点树字符串化工具。所有的黑魔法都是通过利用插件实现的。 截止目前,PostCSS 的生态圈内已经拥有超过100种插件。这些插件可以做太多的事情,比如lint(译者注2:一种用来检测CSS代码的工具),添加vendor prefixes(译者注3:添加浏览器内核前缀,可以使用浏览器的一些独有特性),允许使用最新的CSS特性,在你的CSS里提供统计数据,或者是允许你使用 Sass,Less 或是 Stylus 等 CSS 预处理器。 让我们看看以下十种插件Autoprefixer
PostCSS Focus
PreCSS
Stylelint
PostCSS CSS Variables
PostCSS Flexbugs Fixes
PostCSS CSSnext
PostCSS CSS Stats
PostCSS SVGO
PostCSS Style Guide
如果你想编写自己的插件,并希望将其贡献给社区的话,请确保你是先看过guidelines这篇文档还有PostCSS Plugin Boilerplate这篇官方文档。 在你的工作中使用PostCSSPostCSS 是用JavaScript所编写的,这使得我们在Grunt,Gulp 或 Webpack等常用的前端构建工具中使用它变得非常方便。 下面是我们使用 Autoprefixer 插件的示例。 npm install autoprefixer --save-dev Gulp如果你使用Gulp,那么你需要安装gulp-postcss 。 npm install --save-dev gulp-postcss gulp.task('autoprefixer', function () { var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); return gulp.src('./src/*.css') .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ])) .pipe(gulp.dest('./dest'));}); Grunt如果你使用Grunt,那么你需要安装grunt-postcss 。 npm install grunt-postcss --save-dev module.exports = function(grunt) { grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { map: true, processors: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] }, dist: { src: 'css/*.css' } } }); grunt.registerTask('default', ['postcss:dist']);}; Webpack如果你使用Webpack,那么你需要安装 postcss-loader 。 npm install postcss-loader --save-dev var autoprefixer = require('autoprefixer');module.exports = { module: { loaders: [ { test: //.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function () { return [autoprefixer]; }} 关于怎么整合PostCSS,你可以从这里 PostCSS repo获取到帮助。 最后最后的诚心安利~在有些时候,在新技术,新工具,新框架发布的时候,去使用并观察其发展趋势无疑是一种明智的行为。 现在,PostCSS 已经发展到一个相当成熟的阶段,我强烈建议你在你的工作中使用它。 因为它现在已经在工程中被广泛的使用,同时在未来一段时间内它不会发生太大的变化。 |