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

隨著技術(shù)的發(fā)展，目前css已經(jīng)發(fā)展到了第三階段css3.css3能夠支持更多的動(dòng)效，以前需要用js來(lái)實(shí)現(xiàn)的動(dòng)畫(huà)、過(guò)渡，計(jì)算等功能，如今大多都能夠用css來(lái)實(shí)現(xiàn)，而且性能更佳。當(dāng)然，隨著業(yè)務(wù)的需要，在編寫(xiě)css過(guò)程當(dāng)中，為了能夠讓css具備js的可復(fù)用性，靈活性、模塊化開(kāi)發(fā)以及更好的管理樣式文件，像sass這樣的css框架就應(yīng)運(yùn)而生。

css預(yù)處理器Sass

sass能夠解決css一些缺憾，包括但不限于：

1.變量：聲明一個(gè)變量，多處使用

$content: "Non-null content";

.main {
content: $content;
}
編譯為
.main {
content: "Non-null content”;
}

2.嵌套：能夠更好的明確父子層級(jí)關(guān)系，方便修改查找以及減少樣式命名

.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.函數(shù)指令：像js一樣開(kāi)始編程

$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種是最為常見(jiàn)的，更多用法，請(qǐng)自行到Sass官網(wǎng)了解。

Css預(yù)處理器讓前端開(kāi)發(fā)人員大大提升了css開(kāi)發(fā)速度，跟sass類擬的還有l(wèi)ess,Stylus。

說(shuō)說(shuō)使用sass遇到的一些問(wèn)題

1.基于Ruby,使用sass必須安裝Ruby,內(nèi)部是使用Ruby來(lái)編譯的。

2.需要安裝node-sass.目前前端都使用了gulp,webpack這些構(gòu)建工具，那么如果用sass的話，webpack構(gòu)建必須安裝sass-loader,而sass-loader又依賴于node-sass,要知道node-sass安裝速度極其慢，特別是使用window系統(tǒng)開(kāi)發(fā)時(shí)，npm<5.4時(shí)，經(jīng)常會(huì)出現(xiàn)node-sass安裝不成功的情況。

3.全局變量的污染，在多人開(kāi)發(fā)過(guò)程當(dāng)中，定義選擇器時(shí)，需要顧及到其他地方是否使用了同樣的命名。

4.靜態(tài)編譯:預(yù)先編譯，展示來(lái)頁(yè)面當(dāng)中的是已經(jīng)編譯好的css.

4.不支持未來(lái)的css。目前處于css3階段，未來(lái)css發(fā)展方向值得期待，未來(lái)的CSS中將會(huì)支持更多的屬性以及函數(shù)，其中不乏有變量，嵌套，值計(jì)算等。

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的優(yōu)點(diǎn)：

1.支持未來(lái)的css: 使用cssnext書(shū)寫(xiě)未來(lái)的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);
}

通過(guò) cssnext，上述代碼會(huì)被處理成以下內(nèi)容

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

2.編譯速度大大提升。PostCSS 聲稱比預(yù)處理器快 3-30 倍。
3.豐富的插件系統(tǒng)，解放你的雙手。
4.css模塊化，將作用域限制于組件內(nèi)，避免了全局作用域的問(wèn)題，再也不用擔(dān)心樣式名重復(fù)了

Postcss屬于css后處理器，動(dòng)態(tài)編譯css，也就是說(shuō)，在運(yùn)行的時(shí)候進(jìn)行編譯。
Postcss本身不會(huì)對(duì)你的css做任何事物，你可以把postcss當(dāng)做一個(gè)殼，伴隨著postcss的生態(tài)，衍生出更多postcss插件，能夠幫你解決95%以上的css疑問(wèn)，如果你需要自定義一個(gè)屬于自己業(yè)務(wù)需求的css編寫(xiě)規(guī)范，那么你也可以為此開(kāi)發(fā)一個(gè)特定的postcss plugin.

postcss在webpack當(dāng)中的配置

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