爲何要用postcss

隨着技術的發展，目前css已經發展到了第三階段css3.css3可以支持更多的動效，之前須要用js來實現的動畫、過渡，計算等功能，現在大多都可以用css來實現，並且性能更佳。固然，隨着業務的須要，在編寫css過程中，爲了可以讓css具有js的可複用性，靈活性、模塊化開發以及更好的管理樣式文件，像sass這樣的css框架就應運而生。

css預處理器Sass

sass可以解決css一些缺憾，包括但不限於：

1.變量：聲明一個變量，多處使用

$content: "Non-null content";

.main {
content: $content;
}
編譯爲
.main {
content: "Non-null content」;
}

2.嵌套：可以更好的明確父子層級關係，方便修改查找以及減小樣式命名

.main {

.redbox {
    background-color: #ff0000;
    color: #000000;
  }

}
編譯爲
.main .redbox {

background-color: #ff0000;
    color: #000000;

}

3.引用混合樣式:一處定義，多處使用

編譯前：

@mixin clearfix {
display: inline-block;
&:after {

content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}
}

.box{

@include clearfix

}

編譯爲：
.box{
display: inline-block;
}
.box:after{

content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}
4.函數指令：像js同樣開始編程

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}

.sidebar { width: grid-width(5); }
編譯爲
.sidebar { width: 240px; }

以上4種是最爲常見的，更多用法，請自行到Sass官網瞭解。

Css預處理器讓前端開發人員大大提高了css開發速度，跟sass類擬的還有less,Stylus。

說說使用sass遇到的一些問題

1.基於Ruby,使用sass必須安裝Ruby,內部是使用Ruby來編譯的。

2.須要安裝node-sass.目前前端都使用了gulp,webpack這些構建工具，那麼若是用sass的話，webpack構建必須安裝sass-loader,而sass-loader又依賴於node-sass,要知道node-sass安裝速度極其慢，特別是使用window系統開發時，npm<5.4時，常常會出現node-sass安裝不成功的狀況。

3.全局變量的污染，在多人開發過程中，定義選擇器時，須要顧及到其餘地方是否使用了一樣的命名。

4.靜態編譯:預先編譯，展現來頁面當中的是已經編譯好的css.

4.不支持將來的css。目前處於css3階段，將來css發展方向值得期待，將來的CSS中將會支持更多的屬性以及函數，其中不乏有變量，嵌套，值計算等。

postcss新革命

postcss定義：

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

postcss的優勢：

1.支持將來的css: 使用cssnext書寫將來的css(postcss-cssnext plugin)

:root {
--heading-color: #ff0000;
}

/ custom selectors /
@custom-selector :--headings h1, h2, h3, h4, h5, h6;

/ usage /
:--headings {
color: var(--heading-color);
}

經過 cssnext，上述代碼會被處理成如下內容

h1,
h2,
h3,
h4,
h5,
h6 {
color: #ff0000;
}

2.編譯速度大大提高。PostCSS 聲稱比預處理器快 3-30 倍。
3.豐富的插件系統，解放你的雙手。
4.css模塊化，將做用域限制於組件內，避免了全局做用域的問題，不再用擔憂樣式名重複了

Postcss屬於css後處理器，動態編譯css，也就是說，在運行的時候進行編譯。
Postcss自己不會對你的css作任何事物，你能夠把postcss當作一個殼，伴隨着postcss的生態，衍生出更多postcss插件，可以幫你解決95%以上的css疑問，若是你須要自定義一個屬於本身業務需求的css編寫規範，那麼你也能夠爲此開發一個特定的postcss plugin.

postcss在webpack當中的配置

npm安裝postcss-loader,postcss-cssnext: npm install postcss-loader postcss-cssnext -D

webpack.config.js

postcss插件參考

• postcss-modules and react-css-modules automatically isolate selectors within components.
• postcss-autoreset is an alternative to using a global reset that is better for isolatable components.
• postcss-initial adds all: initial support, which resets all inherited styles.
• autoprefixer adds vendor prefixes, using data from Can I Use.
• postcss-preset-env allows you to use future CSS features today.
• precss contains plugins for Sass-like features, like variables, nesting, and mixins.
• postcss-assets inserts image dimensions and inlines files.
• postcss-sprites generates image sprites.
• postcss-inline-svg allows you to inline SVG and customize its styles.
• postcss-write-svg allows you to write simple SVG directly in your CSS.
• postcss-syntax switch syntax automatically by file extensions.
• postcss-html parsing styles in <style> tags of HTML-like files.
• postcss-markdown parsing styles in code blocks of Markdown files.
• postcss-jsx parsing CSS in template / object literals of source files.
• postcss-styled parsing CSS in template literals of source files.
• postcss-scss allows you to work with SCSS (but does not compile SCSS to CSS).
• postcss-sass allows you to work with Sass (but does not compile Sass to CSS).
• postcss-less allows you to work with Less (but does not compile LESS to CSS).
• postcss-less-engine allows you to work with Less (and DOES compile LESS to CSS using true Less.js evaluation).
• postcss-js allows you to write styles in JS or transform React Inline Styles, Radium or JSS.
• postcss-safe-parser finds and fixes CSS syntax errors.
• postcss-will-change this plugin uses backface-visibility to force the browser to create a new layer, without overriding existing backface-visibility properties.