什么是postcss

這篇文章主要講解了“什么是postcss”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“什么是postcss”吧！

為什么要用postcss

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

css預(yù)處理器Sass

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

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

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

2.嵌套：能夠更好的明確父子層級關(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一樣開始編程

$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官網(wǎng)了解。

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

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

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

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

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

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

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

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.支持未來的css: 使用cssnext書寫未來的css(postcss-cssnext plugin)

:root {
 --heading-color: #ff0000;
}
/ custom selectors /
@custom-selector :--headings h2, h3, h4, h5, h6, h7;
/ usage /
:--headings {
 color: var(--heading-color);
}

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

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

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

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

感謝各位的閱讀，以上就是“什么是postcss”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對什么是postcss這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！