摘要：預處理器讓前端開發人員大大提升了開發速度，跟類擬的還有。全局變量的污染，在多人開發過程當中，定義選擇器時，需要顧及到其他地方是否使用了同樣的命名。聲稱比預處理器快倍。

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

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。

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 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.

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

webpack.config.js

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