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.