PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

如果你喜欢使用PostCSS，但又不想抛弃你最喜欢的预处理器。不用担心，你不需要作出二选一的选择，你可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。

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

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

为什么要使用两个？

在我们开始介绍如何要把预处理器和PostCSS一起使用，我们将谈一谈为什么你会这么想。简短的答案是：PostCSS插件有很多优秀的预处理器功能。下面的内容会向你们展示为什么这些PostCSS插件是值得拥有的，而且这些插件和预处理器结合在一起工作会变得更好。

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

Autoprefixer

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

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

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

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

有关于Autoprefixer更详细的信息可以点击这里。

rtlcss

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

然而，@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。

posted @ 2021-06-20 21:32 一纸荒唐阅读(1144) 评论(0) 编辑收藏举报

刷新页面返回顶部

一纸荒唐

PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

为什么要使用两个？

Autoprefixer

rtlcss

postcss-colorblind

postcss-svgo

cssnano

postcss-font-magician

项目配置

项目中安装PostCSS插件

预处器在PostCSS之前运行

PostCSS插件和PostCSS测试代码

Sass和PostCSS

通过Gulp来配置

测试预处理器

测试PostCSS

通过Grunt来配置

测试预处理器

设置PostCSS

测试PostCSS

Stylus和PostCSS

通过Gulp来配置

测试预处理器

测试PostCSS

通过Grunt来配置

测试预处理器

配置PostCSS

测试PostCSS

LESS和PostCSS

通过Gulp来配置

测试预处理器

测试PostCSS

通过Grunt来配置

测试预处理器

配置PostCSS

测试PostCSS

接下来的教程

公告