PostCSS深刻学习: PostCSS和Sass、Stylus或LESS一块儿使用

时间 2019-11-13

标签 postcss 深刻学习 sass stylus 一块儿使用繁體版

原文原文链接

若是你喜欢使用PostCSS，但又不想抛弃你最喜欢的预处理器。不用担忧，你不须要做出二选一的选择，你能够把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。javascript

有几个PostCSS插件配合预处理器获得很好的赞誉，由于他们将功能添加到你的工做流中，让你工做变得更加轻松。若是你只使用一个预处理器，而不使用这些插件，你的工做流至少会变得更加困难。php

咱们会涉及一些免费的PostCSS插件，而后咱们将会介绍一些配置的阐述，告诉您如何将PostCSS和你喜欢的预处理器(Sass、Stylus或LESS)之一结合在一块儿使用。css

为何要使用两个？

在咱们开始介绍如何要把预处理器和PostCSS一块儿使用，咱们将谈一谈为何你会这么想。简短的答案是：PostCSS插件有不少优秀的预处理器功能。下面的内容会向大家展现为何这些PostCSS插件是值得拥有的，并且这些插件和预处理器结合在一块儿工做会变得更好。html

注意：在常规的预处理器经过使用混合宏或函数特性像程序同样处理代码，但下面的例子是自动处理的，也能达到相似的结果。不过不一样的是，你关心的是编写你本身的CSS代码，而其余一切经过插件去处理，而这个过程当中不须要调用函数，也没有混合宏等等。java

Autoprefixer

预处理器中有不少混合宏处理浏览器前缀。好比说，Compass库中使用@include box-sizing(border-box);来解决box-sizing属性在各浏览器的私有前缀。git

依靠混合宏处理浏览器私有前缀，会存在下面这些问题：github

要知道属性须要的前缀，而后才能决定如何部署混合宏
必须知道混合宏的名称和如何调用混合宏
必须时刻关注浏览器对每一个属性的私有前缀变化（好比，box-sizing如今就再也不须要前缀）

Autoprefixer消除了对这些方面的担心，它能够根据CanIUse.com数据对属性自动添加浏览器的私有前缀。web

有关于Autoprefixer更详细的信息能够点击这里。sql

rtlcss

预处理器能够根据来源在样式中生成LTR(left向right，这也是默认的)和RTL(right 向left)，但它一般须要使用一些混合宏或变量插值。例如，你要写margin-left:1rem，你可能须要编写margin-#{$dir}:1rem;或@include margin-left(1rem);。npm

然而，@Mohammad Younes开发的rtlcss插件，你不须要再使用混合宏或变量插值。你平时只要按正常的编写方式编写CSS，插件会自动根据全部实例，完成right或left的互换。你不须要编写任何特殊代码，就可让margin-left:1rem;会自动生成margin-right:1rem;。

有关于rtlcss插件更详细的介绍，能够点击这里。

postcss-colorblind

由@Brian Holt提供的postcss-colorblind插件能够自动生成不一样版本的样式表，让你不懂色彩的人也能亲身体验本身的设计。这款插件模拟了八种不一样类型的颜色配色方案，能够快速访问你的配色方案。

这是PostCSS插件的一个有用功能，而这个功能在预处理器中要实现是很是困难的。

有关于postcss-colorblind相关的信息能够点击这里。

postcss-svgo

@Ben Briggs的postcss-svgo插件能够给内联SVG的代码作优化，例如：

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

优化后的代码不到原来的一半：

background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

有关于postcss-svgo插件更多的信息可点击这里。

cssnano

虽然预处理器中能够带空格和注释，但@Ben Briggs的cssnano插件能够执行的各类优化远远超过这两个步骤。本系列教程中的《PostCSS深刻学习: 压缩和优化CSS》详细讨论了如何使用cssnano对你的样式表进行优化和压缩。

有关于cssnano更详细的信息能够点击这里。

postcss-font-magician

@Jonathan Neal的postcss-font-magician插件可让你很是容易的使用自定义字体。你不须要使用任何混合宏之类，只须要像平时那样使用font-family规则就行：

body { font-family: "Alice"; }

插件会生成一份完整的@font-face规则:

@font-face { font-family: "Alice"; font-style: normal; font-weight: 400; src: local("Alice"), local("Alice-Regular"), url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"), url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"), url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff") format("woff"), url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf") format("truetype") } body { font-family: "Alice"; }

在关于postcss-font-magician更多信息能够点击这里。

项目配置

下面有六个配置指南：每一个主流预处理器(Sass、LESS或Stylus)分别结合Gulp或Grunt在项目中的配置指南。固然，你不必都看，你彻底能够选择你本身喜欢的预处理器和构建工具。若是你不能肯定在项目中使用Gulp仍是Grunt。那么本教程将会告诉你，Gulp是一个很好的选择，由于其简单。

不管你使用什么样的项目配置指南，你都须要一个空的Gulp或Grunt的项目。你能够阅读本系列教程中有关于Gulp或Grunt配置项目的相关教程：

若是你不想从头开始手动设置您的项目，你能够下载本教程中提供的源码附件，提取Gulp或Grunt项目到一个空的文件夹中。

而后在命令终端运行：npm install。

项目中安装PostCSS插件

当你为下面的小节设置了一个空的项目，你还须要安装两个PostCSS插件：Autoprefixer和cssnano。你能够经过下面的命令来安装：

npm install autoprefixer cssnano --save-dev

咱们将用这两个插件来测试你的预处理器和PostCSS一块儿工做。

预处器在PostCSS以前运行

使用预处理器和PostCSS一块儿处理你的样式表，首要的原则是：预处理器要运行在PostCSS以前。这主要是由于你不想让任何预处理器的指定语法让PostCSS插件瘫痪不能工做，固然也不但愿PostCSS修改你的代码，防止预处理器不能按预期运行。

PostCSS插件和PostCSS测试代码

在开始介绍每一个预处理器和PostCSS一块儿工做的配置以前，咱们都会让预处理器编译完成以后再运行PostCSS插件Autoprefixer和cssnano。在每一个配置介绍中，咱们都须要为这两个插件添加一些测试代码。

为了在每一个小节中节省重复相同的代码，当你看到说让你添加PostCSS测试代码这样的指令时，请在预处理器源文件中添加下面的代码：

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano { /* cssnano will remove this comment */ display: flex; font-weight: normal; margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem; font-weight: normal; padding: 1.75rem; width: calc(50rem - (2 * 1.75rem)); }

若是成功了，每一个示例编译出来的代码以下：

.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

注意：使用Autoprefixer给flexbox添加私有前缀和使用cssnano来优化和压缩你的样式表。咱们使用相同的代码来测试cssnano，正如前面的教程《PostCSS深刻学习: 压缩和优化CSS》所介绍的同样，因此你能够参考前面的教程了解其中执行优化和压缩的细节。

Sass和PostCSS

由于你已经使用了Node.js来运行Gulp或Grunt和PostCSS，因此使用Sass最简单的方法就是使用LibSass。并且LibSass编译速度也要比Ruby Sass快不少。在下面的教程中，将经过gulp-sass或grunt-contrib-sass模块来部署LibSass。

经过Gulp来配置

使用npm install gulp-sass --save-dev将gulp-sass模块安装到你的项目中。

接下来像下面同样更新你的gulpfile.js文件：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); var sass = require('gulp-sass'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); gulp.task('css', function () { var processors = [ autoprefixer, cssnano ]; return gulp.src('./src/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });

修改了默认的gulpfile.js文件：

添加变量，加载gulp-sass，autoprefixer和cssnano
将autoprefixer和cssnano变量放在processors数组内
将要编译的源文件名.css的扩展名修改成.scss
添加pipe()，.pipe(sass()...)用来处理Sass，须要确保的是处理Sass要放在PostCSS前面

如今咱们能够写一些测试代码来确保Sass和PostCSS都能正常编译。

测试预处理器

将src/style.css文件重命名为src/style.scss，而且在文件中添加下面的测试代码：

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

运行gulp css，而且看看dest/中有没有一个新文件style.css，而且文件中的内容：

body { font: 100% Helvetica, sans-serif; color: #333; }

测试PostCSS

如今，在style.scss文件中添加前面提供测试PostCSS的代码。而且运行gulp css以后，查看dest/style.css文件：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

经过Grunt来配置

使用npm install grunt-contrib-sass在你新的Grunt项目中安装grunt-contrib-sass模块。

而后在grunt.loadNpmTasks()函数中添加grunt-contrib-sass，放在以前PostCSS的后面：

grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-sass');

如今须要设置一个新的任务来处理Sass:

grunt.initConfig({

可是须要在postcss任务前添加这段代码：

sass: { dist: { files: { 'src/style.css': 'src/style.scss' } } },

如今已经注册好了Sass和PostCSS任务。以后须要在grunt.loadNpmTasks()函数中插入这些任务：

grunt.registerTask('css', ['sass', 'postcss']);

测试预处理器

将src/style.css文件从新命名为src/style.scss，而且添加下面的Sass代码，来测试你的配置:

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

运行grunt css命令以后，在dest/文件夹中会建立一个新文件style.css，编译后的代码将放在这个文件中：

body { font: 100% Helvetica, sans-serif; color: #333; }

设置PostCSS

如今咱们须要运行autoprefixer和cssnano插件，在你的gruntfile.js文件中的processors数组中添加下面代码：

processors: [ require('autoprefixer')(), require('cssnano')() ]

测试PostCSS

将测试PostCSS的代码添加到style.scss文件中，而后在命令中再次运行grunt css命令，你会在dest/style.css中看到编译后的代码，编译后的代码包括了autoprefixer处理后的代码，而且整个代码进行了压缩和优化。

Stylus和PostCSS

首先得很是感谢@Sean King提供的PostStylus的插件包，它能让你将Stylus和PostCSS很好的结合在一块儿工做。若是你是一名Stylus开发者，你能够将PostStylus添加到你的工做流中。

经过Gulp来配置

若是你正在使用一个半成品的gulpfile.js来启动你的项目，须要注意的是，里面使用了gulp-postcss插件。而其实是只有使用Sass的才须要在流程添加这个插件，但对于使用Stylus的同窗来讲，这个插件是不须要的，咱们要使用的是PostStylus插件包做为编译器。

使用npm uninstall gulp-postcss --save-dev删除它，而且将gulpfile.js文件中的这行代码删除掉：

var postcss = require('gulp-postcss');

接下须要安装Stylus和PostCSS插件，你能够在命令行中执行下面的命令：

npm install gulp-stylus poststylus --save-dev

而且将gulpfile.js文件更新为：

var gulp = require('gulp'); var stylus = require('gulp-stylus'); var poststylus = require('poststylus'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); gulp.task('css', function () { var processors = [ autoprefixer, cssnano ]; return gulp.src('./src/*.styl') .pipe(stylus({ use: [ poststylus(processors) ] })) .pipe(gulp.dest('./dest')); });

上面的代码主要执行：

添加gulp-stylus，poststylus，autoprefixer和cssnano变量来加载这些插件
在processors数组中添加autoprefixer和cssnano变量
将要编译的源文件名.css扩展名换成.styl
移除.pipe()行中的.pipe(postcss(processors))
在.pipe()行中添加.pipe(stylus{...})来设置gulp-stylus和poststylus模块的编译功能

测试预处理器

开始首轮测试编译。在src目录中，把style.css文件从新命名为style.styl，而且在文件中添加测试Stylus的代码：

$font-stack = Helvetica, sans-serif $primary-color = #333 body font: 100% $font-stack color: $primary-color

运行gulp css命令以后，你在dest/目录中能看到一个style.css文件，而且带有编译后的代码：

body { font: 100% Helvetica, sans-serif; color: #333; }

测试PostCSS

将前面提到测试PostCSS代码添加到你的style.styl文件中，确保粘贴后的代码中只有tab缩进，而没有spaces缩进。

从新编译一下文件，检查你的dest/style.css文件，是否包含了编译以后输出的代码：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

经过Grunt来配置

和使用Gulp配置Stylus的项目同样，默认的PostCSS编译器不是项目必需的，它只是纯用于Sass和LESS这样的处理器中。你能够经过npm uninstall grunt-postcss --save-dev命令将其从你的项目中删除。

如今，使用下面的命令将grunt-contrib-stylus和poststylus功能模块安装到你的项目中：

npm install grunt-contrib-stylus poststylus --save-dev

因为咱们不须要再使用grunt-postcss，因此将下面这行代码：

grunt.loadNpmTasks('grunt-postcss');

换成：

grunt.loadNpmTasks('grunt-contrib-stylus');

由于不须要使用grunt-postcss，因此在grunt.initConfig({...})中就再也不须要postcss任务，因此得删除掉这个任务，而且将stylus任务替换上去：

stylus: {
  compile: {
    options: {
    },
    files: {
      'dest/style.css': 'src/style.styl'
    }
  }
}

测试预处理器

如今咱们已经准备好测试编译器。把你的src文件夹中的style.css重命名为style.styl，而且在这个文件中添加Stylus测试代码：

$font-stack = Helvetica, sans-serif $primary-color = #333 body font: 100% $font-stack color: $primary-color

在命令行中执行grunt stylus命令。你能够在dest/文件夹中的style.css文件中能够看到下面的代码：

body{font:100% Helvetica,sans-serif;color:#333}

配置PostCSS

将PostCSS插件添加到项目的编译过程当中，首先将这段代码添加到gruntfile.js顶部，在module.exports...上面：

var poststylus = function() { return require('poststylus')(['autoprefixer', 'cssnano']) };

在项目中加载你想要的PostCSS插件上，而不是像前面的教程同样，放在一个processors数组中。

应该在stylus任务中添加options对象，能够按下面的方式更新你的代码：

options: { use: [poststylus] },

这是告诉grunt-contrib-stylus使用poststylus插件来编译，固然你也能够在这个里面添加PostCSS的其余插件。

测试PostCSS

在src/style.styl文件中添加PostCSS的测试代码，而后在命令行中运行grunt stylus命令。你在dest/style.css文件中能够看到编译后的代码：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

LESS和PostCSS

经过Gulp来配置

经过npm install gulp-less --save-dev把gulp-less模块安装到你的项目中。

接下来须要更新gulpfile.js文件的配置：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); var less = require('gulp-less'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); gulp.task('css', function () { var processors = [ autoprefixer, cssnano ]; return gulp.src('./src/*.less') .pipe(less()) .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });

默认的gulpfile.js文件作了一些改变：

添加gulp-less、autoprefixer和cssnano变量加载这些模块
在processors数组中添加autoprefixer和cssnano变量
将编译源文件中的.css扩展名换成.less
在.pipe()添加LESS处理，而且放在PostCSS处理器前面

测试预处理器

接下来测试LESS和PostCSS。

将src/style.css重命名为src/style.less，而且在文件中添加下面的测试代码：

@font-stack: Helvetica, sans-serif; @primary-color: #333; body { font: 100% @font-stack; color: @primary-color; }

运行gulp css命令，在你的dest/目录中能够看到添加了一个style.css文件，文件中包含了编译后的代码：

body{font:100% Helvetica,sans-serif;color:#333}

测试PostCSS

如今在你的style.less文件中添加前面提供的PostCSS测试代码。

运行gulp css命令，编译后的代码添加到dest/style.css文件中：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

经过Grunt来配置

在新的Grunt项目中经过npm install grunt-contrib-less命令将grunt-contrib-less模块添加到项目中，接着在grunt.loadNpmTasks()函数中像下面同样添加PostCSS插件：

grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-less');

接下来设置LESS处理器的新任务：

grunt.initConfig({

在现有的postcss任务中添加下面的代码：

less: { production: { files: { 'src/style.css': 'src/style.less' } } },

如今注册运行LESS和PostCSS的任务。在grunt.loadNpmTasks()函数中添加下面的代码：

grunt.registerTask('css', ['less', 'postcss']);

测试预处理器

测试预处理器，从新将src/目录中的style.css命名为style.less，而且在测试文件中添加LESS代码：

@font-stack: Helvetica, sans-serif; @primary-color: #333; body { font: 100% @font-stack; color: @primary-color; }

在命令行中执行grunt css命令。你能够看到dest/目录中新建立了一个style.css文件，而且包含了编译以后的代码：

body { font: 100% Helvetica, sans-serif; color: #333333; }

配置PostCSS

如今将PostCSS插件添加到工做流中。更新gruntfile.js中processors数组：

processors: [ require('autoprefixer')(), require('cssnano')() ]

测试PostCSS

将测试PostCSS的代码添加到style.less文件中，而且再次运行grunt css。在dest/style.css文件中能够看到PostCSS编译后的代码：

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

接下来的教程

下一篇教程咱们将介绍使用不一样的PostCSS插件自动生成BEM/SUIT的CSS类名。在这个过程当中可让你能更好的跟踪BEM/SUIT开发过程，并且更有效率。

若是你对接下来的内容感兴趣的话，欢迎持续关注这个系列教程的下一篇。

本文根据@Kezz Bracey的《Using PostCSS Together with Sass, Stylus, or LESS》所译，整个译文带有咱们本身的理解与思想，若是译得很差或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591。