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。