PostCSS介紹

原文鏈接：http://www.smashingmagazine.com/2015/12/introduction-to-postcss/

轉(zhuǎn)自：http://www.zcfy.cc/article/81

CSS的發(fā)展與所有語(yǔ)言的發(fā)展一樣，都有一個(gè)迭代的過(guò)程。伴隨著每一個(gè)主要版本的發(fā)布，我們都可以獲得新的特性和語(yǔ)法幫忙我們更好的完成樣式。CSS3 介紹了很多新的特性，可以讓我們?cè)O(shè)計(jì)交互，之前我們都是通過(guò)javascript來(lái)實(shí)現(xiàn)交互。每一天都會(huì)有新工具出現(xiàn)，讓我們可以更靈活地表達(dá)樣式。

PostCSS就是最近才出現(xiàn)的這么一個(gè)工具PostCSS。PostCSS的目標(biāo)是通過(guò)自定義插件和工具這樣的生態(tài)系統(tǒng)來(lái)改造CSS。與Sass和Less這些預(yù)編譯器相同的原則，PostCSS把擴(kuò)展的語(yǔ)法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS。

如何實(shí)現(xiàn)？JavaScript。

JavaScript轉(zhuǎn)換我們的樣式比其他處理器快。使用Gulp或Grunt的task-runner工具，我們可以通過(guò)構(gòu)建過(guò)程轉(zhuǎn)換樣式，就像Sass和Less的編譯。像React和AngularJS這樣的庫(kù)和框架，允許我們可以在JavaScript中直接寫(xiě)CSS，為我們的樣式打開(kāi)了一扇使用JavaScript轉(zhuǎn)換的大門(mén)。

PostCSS的歷史

PostCSS作為使用JavaScript處理CSS的方法被推出，它的開(kāi)發(fā)者是Andrey Sitnik, Autoperfixer的作者。PostCSS本身只是一個(gè)API，當(dāng)使用其龐大的插件生態(tài)系統(tǒng)時(shí)，可以為我們提供強(qiáng)大的處理能力。生成的Source maps可以方便我們的調(diào)試，抽象語(yǔ)法樹(shù)（AST）的存在可以幫忙我們理解代碼是如何被轉(zhuǎn)換的。

由于PostCSS使用Node.js框架，無(wú)論語(yǔ)言還是工具可以按需修改和定制。其他工具如Sass和LESS就會(huì)因?yàn)橄到y(tǒng)能力的限制，只可以使用編譯器可用的方法。

由于其使用的API，PostCSS允許我們?yōu)榭赡苄枰娜魏喂δ埽瑒?chuàng)建自定義的插件和工具。模塊化平臺(tái)的設(shè)計(jì)使得工具中立，使得我們只需要關(guān)注項(xiàng)目需要的功能。PostCSS對(duì)語(yǔ)言格式不關(guān)心，接受不同預(yù)處理器的語(yǔ)法風(fēng)格，像Sass和LESS，如果有必要的話(huà)。

模塊化的好處

大多數(shù)開(kāi)發(fā)人員很少?gòu)念^開(kāi)始一個(gè)項(xiàng)目。很多都是以Sass模板開(kāi)始，在指定項(xiàng)目中使用Sass模板提供的variables，mixins，functions。我們?yōu)閒unctions,mixins,表格系統(tǒng)，通用工具提代獨(dú)立的樣式表，從而使開(kāi)發(fā)更容易。到了最后，我們最終會(huì)有10個(gè)或更多個(gè)樣式文件用來(lái)保證開(kāi)發(fā)的條理性。

維護(hù)Sass或Less片斷的庫(kù)是一個(gè)艱巨的任務(wù)，會(huì)留下一下臃腫的項(xiàng)目。很多項(xiàng)目中沒(méi)有用到mixins和funcitons，只是做為"以防萬(wàn)一"的代碼包含進(jìn)來(lái)。PostCSS很容易安裝，即插即用的模塊，使有獨(dú)特需求的項(xiàng)目開(kāi)發(fā)過(guò)程更靈活。

PostCSS把我們產(chǎn)品中的樣式表中用來(lái)創(chuàng)建funtions,utities和mixins的代碼移出來(lái)包裝成插件。現(xiàn)在對(duì)于每個(gè)項(xiàng)目，我們可以通過(guò)構(gòu)建工具中包含對(duì)應(yīng)插件就可以使用這些工具。

PostCSS FontPath插件就可以見(jiàn)證這種方式的優(yōu)勢(shì)。在使用Sass時(shí)，我們可以在文件中包含進(jìn)一個(gè)mixin來(lái)自定義網(wǎng)頁(yè)字體，因此我們創(chuàng)建了一個(gè)@font-face的標(biāo)簽。

@mixin importfont($font-family,$font-filename,$font-weight:normal,$font-style:normal,$font-stretch:normal){
@font-face{
font-family:'#{$font-family}';
src:url('#{font-filename}.eot');
src:url('#{font-filename}.woff') format('woff'),
url('#{$font-filename}.ttf') format('truetype');
font-weight:$font-weight;
font-style:$font-style;
font-stretch:$font-stretch;
}
}
@include importfont('mission script','fonts/mission-script-webfont',300);

在我們的項(xiàng)目中使用PostCSS FontPath插件，我們就不再需要像上面那樣包含Sass mixins了。在我們的CSS中寫(xiě)入下面的代碼，PostCSS會(huì)通過(guò)Grunt或Gulp把它轉(zhuǎn)換成我們需要的。

@font-face{
font-family:'My Font';
font-path:'/path/to/font/file';
font-weight:normal;
font-style:normal;
}

在寫(xiě)這篇文章時(shí)，PostCSS已經(jīng)有超過(guò)100個(gè)社區(qū)插件，允許諸如未來(lái)的CSS語(yǔ)法，快捷鍵，工具和語(yǔ)言的擴(kuò)展。PostCSS除了是一個(gè)'酷'的工具，它的用戶(hù)群里也有WordPress,谷歌和推特團(tuán)隊(duì)這些重量級(jí)的用戶(hù)。

添加PostCSS到你的工作流

因?yàn)镻ostCSS是用JavaScript編寫(xiě)的，我們可以在項(xiàng)目中使用像Gulp和Grunt這樣的Task runner來(lái)轉(zhuǎn)換CSS。下面的教程演示如何把PostCSS使用Gulp或Grunt合并到你的工作流。使用這兩種工具不是至關(guān)重要的，這只是個(gè)人喜好或哪一個(gè)更合適項(xiàng)目的問(wèn)題。

注意：Gulp和Grunt完整版的工具放在GitHub可用。你可以隨時(shí)使用它做為初始模板，并且可以根據(jù)需要擴(kuò)展它。

使用GULP設(shè)置POSTCSS

如果你對(duì)Gulp不熟悉，我推薦你閱讀Callum Macrae寫(xiě)的"基于Gulp構(gòu)建"做個(gè)初步了解，并把這個(gè)工具跑起來(lái)。

在終端執(zhí)行npm i gulp-postcss -D命令，在你的項(xiàng)目中安裝PostCSS模塊。

在項(xiàng)目下的Gulpfile.js中請(qǐng)求我們安裝的PostCSS模塊，然后在任務(wù)中使用它。在這里，一定要更新開(kāi)發(fā)文件的路徑和輸出轉(zhuǎn)換文件的目錄。

var postcss = require('gulp-postcss');
gulp.task('styles',function(){
return gulp.src('path/to/dev/style.css')
.pipe(postcss([]))
.pipe(gulp.dest('path/to/prod'))
});

在命令行輸入gulp styles執(zhí)行該任務(wù)。

使用GRUNT設(shè)置POSTCSS

注意：如果你對(duì)Grunt不熟悉，我推薦你通過(guò)閱讀Mike Cunsolo寫(xiě)的"Grunt入門(mén)和實(shí)踐"來(lái)熟悉Grunt的使用。

在終端執(zhí)行npm i grunt-postcss -D命令，在你的項(xiàng)目中安裝PostCSS模塊。

一旦在系統(tǒng)里安裝了該插件，你就可以像下面這樣，使用它在Gruntfile里創(chuàng)建一個(gè)任務(wù)了。一定記得更新cwd和dest的值來(lái)反映你的應(yīng)用程序結(jié)構(gòu)。

module.exports = function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
styles:{
options:{
processors:[]
},
dist:{
files:[{
expand:true,
cwd:'dev/',
src:['**/*.css'],
dest:'prod/'
}]
}
}
});
// 加載post-css
grunt.loadNpmTasks("grunt-postcss");
};

在命令行輸入grunt styles執(zhí)行該任務(wù)。

安裝插件

使用PostCSS自己并不完全是強(qiáng)大的，它的強(qiáng)大依賴(lài)于插件。你可能已經(jīng)注意到在上面Gulp和Grunt的實(shí)現(xiàn)中，任務(wù)聲明中有空的數(shù)組。在這些數(shù)組中我們可以引入社區(qū)開(kāi)發(fā)的PostCSS插件。

核準(zhǔn)的PostCSS插件列表可以在PostCSS GitHub頁(yè)查看，這些插件像所有的NPM包一樣，可以通過(guò)命令行安裝。許多插件只能做為PostCSS的擴(kuò)展，對(duì)于你使用的構(gòu)建工具是不可知的。比如，我們將要安裝的PostCSS Focus插件,它將為每一個(gè)hover狀態(tài)添加:focus。

下面例子中使用的所有插件，我們需要使用命令行和NPM在我們的項(xiàng)目中安裝這些包文件。

POSTCSS插件安裝示例

npm i postcss-focus -D

插件可以直接傳遞到方法；然而，為了代碼的整潔，我們可以構(gòu)造一個(gè)數(shù)組作為參數(shù)將其傳遞給方法。在這個(gè)數(shù)組里，我們包含必要的require語(yǔ)句，該語(yǔ)句返回插件，接著立即調(diào)用返回的插件。如果你想深入了解這個(gè)概念，推薦閱讀Ryan Christiani寫(xiě)的Functions as First-Class Citizens in JavaScript這篇文章。

require('postcss-focus')()

Grunt使用新創(chuàng)建的processorArray后的代碼，如下：

var processorArray = [
require('postcss-plugin')()
];
// Snipped for brevity
styles:{
options:{
processors:processorArray
},
dist:{
src:'path/to/dev/style.css',
dest:'path/to/prod/style.css'
}
}

Gulp修改后的代碼如下：

var processorArray = [
require('postcss-plugin')()
];
gulp.task('styles',function(){
gulp.src('path/to/dev/style.css')
.pipe(postcss(processorArray))
.pipe(gulp.dest('path/to/prod'))
});

插件

一旦我們安裝一個(gè)插件和構(gòu)建工具準(zhǔn)備編譯代碼，我們就可以使用PostCSS和插件的功能。首先我們要做的是在開(kāi)發(fā)目錄下新建一個(gè).css擴(kuò)展的文件。

"等等！一個(gè)CSS文件？"沒(méi)錯(cuò)，一個(gè)CSS文件。因?yàn)槭褂肞ostCSS轉(zhuǎn)換我們的CSS，我們不需要特定的語(yǔ)法，只需要使用傳統(tǒng)的CSS就可以。如果你熟悉預(yù)處理器，離開(kāi)了.sass,.scss,.styl或.less文件回歸到.css，你會(huì)覺(jué)得不自然。但是，事實(shí)上，它帶來(lái)的不是轉(zhuǎn)換而是轉(zhuǎn)變。

我們可以分別執(zhí)行grunt styles和gulp styles使Task runner運(yùn)行，利用我們新安裝的PostCSS插件來(lái)處理我們的樣式。我們的開(kāi)發(fā)樣式文件將通過(guò)PostCSS插件被處理，然后輸出到我們指定的生產(chǎn)目錄。

以下是一些值得注意的插件，包括這些插件的安裝和使用說(shuō)明，在你開(kāi)始使用PostCSS時(shí)會(huì)有一些幫助。

自動(dòng)加前綴

編寫(xiě)兼容眾多瀏覽器和設(shè)備的樣式是一種痛苦，需要添加供應(yīng)商前綴保持最新的屬性和值更是一種挑戰(zhàn)。所幸，AutoPrefixer可以找出何時(shí)何地需要提供前綴。該插件可以讓我們?cè)跇邮街惺褂眯碌奶匦院蛯傩裕瑸閷傩院椭堤砑忧熬Y由它來(lái)完成。

這里是如何通過(guò)命令行安裝這個(gè)插件：

npm i autoprefixer -D

當(dāng)我們?cè)跀?shù)組中添加一個(gè)插件時(shí)，我們需要提供一個(gè)對(duì)象，該對(duì)象提供項(xiàng)目支持的瀏覽器范圍的數(shù)組。可以提供的選項(xiàng)列表可以在Browserslist Github Account中查看。

我們?cè)谔幚砥髦刑砑右粋€(gè)Autoprefixer插件

var processorsArray = [
// snipped for brevity
require('autoprefixer')({browsers:['last 2 versions','ie 6-8','Firefox > 20']})
]

根據(jù)設(shè)定的目標(biāo)不同，樣式表中相應(yīng)的CSS屬性和值上會(huì)自動(dòng)加上適當(dāng)?shù)那熬Y。

這是開(kāi)發(fā)的CSS:

.item{
display:flex;
flex-flow:row wrap;
}

這里是轉(zhuǎn)換后的輸出：

.item{
display:-webkit-flex;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
-webkit-flex-flow:row wrap;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
}

利用CSSNEXT使用未來(lái)語(yǔ)法

CSS4不久將要來(lái)到我們身邊，CSS4將帶來(lái)一些新的特性，如本地變量,自定義選擇器和新的偽類(lèi)鏈接。在寫(xiě)這篇文章時(shí)，這些新特性在所有瀏覽器都不支持，但是它們將在現(xiàn)代瀏覽器中實(shí)現(xiàn)規(guī)范得到了批準(zhǔn)。

CSSNext可以把任意的CSS4特征或?qū)傩赞D(zhuǎn)換成瀏覽器可以解析的CSS3屬性。這個(gè)工具可以單獨(dú)使用，也可以做為PostCSS的插件使用。我們接著把它也添加到processorsArray，processorsArray里已經(jīng)包含了其他我們需要的PostCSS插件。

通過(guò)命令行安裝CSSNext插件，如下：

npm i cssnext -D

(譯者注：cssnext官網(wǎng)正式更名為postcss-cssnext,安裝時(shí)請(qǐng)使用npm i postcss-cssnext,估計(jì)是避免與CSSNEXT混淆)

然后將它添加到你的處理器中：

var processorsArray = [
// snipped for brevity
require('cssnext')()
]

現(xiàn)在，在你的生產(chǎn)代碼中可以寫(xiě)CSS4的特性，PostCSS會(huì)通過(guò)任務(wù)管理器轉(zhuǎn)換這些語(yǔ)法，從而被今天的瀏覽器支持。再用開(kāi)發(fā)文件中的CSS替換這些轉(zhuǎn)換后的代碼即可。

這里是開(kāi)發(fā)的CSS:

// 自定義變量
:root{
--linkColour:purple;
}
a{
color:var(--linkColour);
}
// 自定義媒體查詢(xún)范圍
@custom-media --only-medium-screen (width>=500px) and (width/
@import "partials/_base.css";
/* 混入（Mixins） */
@define-mixin square $dimension{
width:$dimension;
height:$dimension;
}
/* 嵌套，變量和混入 */
.button{
@mixin square 200px;
background:$green;
&:hover{
background:$blue;
}
}

這里是轉(zhuǎn)化后的輸出：

.square{
background:#0000ff;
border-radius:10px;
}
.button{
width:200px;
height:200px;
background:#00ff00;
}
.button:hover{
background:#0000ff;
}

如果你想探索CSSNext更多的功能，可以訪問(wèn)playground這個(gè)網(wǎng)站，在這個(gè)網(wǎng)站上你可以嘗試更多CSSNext支持的CSS4特性。

SASS語(yǔ)法

如果Sass是你的首選預(yù)處理語(yǔ)言，不用擔(dān)心：你可以在PostCSS中使用Sass的語(yǔ)法和Sass的工具。傳統(tǒng)的CSS不支持變量，嵌套和引用，使用插件比如PreCSS就可以讓我們使用這些特性，這樣我們就可以在傳統(tǒng)的樣式文件中使用Sass的語(yǔ)法。

如果通過(guò)命令行將插件添加到構(gòu)建里，參考上面的演示將該包添加到processorsArray數(shù)組里，這樣我們就可以立即使用Sass語(yǔ)法了。如果我們從Sass切換到了PostCSS,你需要把文件的擴(kuò)展改成.css,并且在你的Task runner中立即執(zhí)行。

通過(guò)命令行安裝PreCSS,如下：

npm i precss -D

把這個(gè)插件添加到你的處理器中：

var processorsArray = [
// snipped for brevity
require('precss')()
];

這里是開(kāi)發(fā)的CSS：

/* 變量 */
$blue:#0000ff;
$green:#00ff00;
$radius:10px;
.square{
background:$blue;
border-radius:$radius;
}
/* 引用 */
@import "partials/_base.css";
/* 混入（Mixins） */
@define-mixin square $dimension{
width:$dimension;
height:$dimension;
}
/* 嵌套，變量和混入 */
.button{
@mixin square 200px;
background:$green;
&:hover{
background:$blue;
}
}

這里是轉(zhuǎn)化后的輸出：

.square{
background:#0000ff;
border-radius:10px;
}
.button{
width:200px;
height:200px;
background:#00ff00;
}
.button:hover{
background:#0000ff;
}

利用社區(qū)插件擴(kuò)展CSS

PostCSS的能力在于社區(qū)插件，插件可以幫忙我們更加有效的編寫(xiě)代碼。這些插件給我們提供了編寫(xiě)代碼更快捷的方式，或者至少可以使用更容易的方法來(lái)實(shí)現(xiàn)創(chuàng)造性的樣式。借助PostCSS API,這些插件允許我們?cè)陧?xiàng)目中可以自定義屬性，選擇器和值，便得我們可以更有效的編寫(xiě)樣式，盡量少的使用搜索。

QUANTITY QUERIES

數(shù)量查詢(xún)功能非常強(qiáng)大。他們?cè)试S我們?cè)贑SS中計(jì)算元素?cái)?shù)量，從而基于兄弟元素的數(shù)量應(yīng)用樣式。在今天，你可以在CSS中使用數(shù)量查詢(xún)，因?yàn)閿?shù)量查詢(xún)依賴(lài)一些先進(jìn)的CSS選擇器，所以在寫(xiě)這些選擇器時(shí)有點(diǎn)棘手。在線工具QQ的存在可以幫忙我們完成這樣的查詢(xún)，我們也可以在樣式中直接使用PostCSS自定義選擇器。

像其他插件的安裝一樣，使用命令行安裝Quantity Queries插件，如下：

npm i postcss-quantity-queries -D

并且在你的處理器中添加這個(gè)插件：

var processors = [
// Snipped for brevity
require('postcss-quantity-queries')()
];

一旦這個(gè)插件安裝好，你就可以只通過(guò)這個(gè)插件自定義選擇器和變量，基于匹配的元素應(yīng)用樣式了。

這里是開(kāi)發(fā)的CSS:

// "至少"數(shù)量的兄弟元素應(yīng)用樣式
.container > .item:at-least(5){
background:blue;
}

// "最多"數(shù)量的兄弟元素應(yīng)用樣式
.item > a:at-most(10){
color:green;
}
// "范圍"數(shù)量的兄弟元素應(yīng)用樣式
.gallery > img:between(4,7){
width:25%;
}
// "精確提供項(xiàng)"的兄弟元素應(yīng)用樣式
.profiles:exactly(4){
flex:1 0 50%;
}

這里是轉(zhuǎn)化后的輸出：

.container > .item:nth-last-child(n+5),
.container > .item:nth-last-child(n+5) ~ .item{
background:blue;
}
.item > a:nth-last-child(-n+10):first-child,
.item > a:nth-last-child(-n+10):first-child ~ a{
color:green;
}
.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child,
.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img{
width:25%;
}
.profiles:nth-last-child(4):first-child,
.profiles:nth-last-child(4):first-child ~.profiles{
flex:1 0 50%;
}

利用SHORT擴(kuò)展簡(jiǎn)寫(xiě)屬性

我們?cè)趯?xiě)樣式時(shí)，偶爾會(huì)遇到一些屬性的語(yǔ)法讓你說(shuō)，"應(yīng)該能短一些"。所幸，Short插件可以幫助我們做到這一點(diǎn)：寫(xiě)樣式更加有邏輯性。它讓我們可以為position和size寫(xiě)簡(jiǎn)寫(xiě)屬性，就像background和font屬性可以凝聚成一個(gè)單一的聲明。

通過(guò)PostCSS API，簡(jiǎn)寫(xiě)聲明被轉(zhuǎn)換成瀏覽器易解析的樣式，允許一個(gè)簡(jiǎn)潔開(kāi)發(fā)樣式表和一個(gè)更有組織的生產(chǎn)樣式表。

使用命令行安裝Short:

npm i postcss-short -D

并且在你的處理器中添加這個(gè)插件：

var processors = [
require('postcss-short')()
];

text屬性包括這些輸入屬性：color,font-style,font-variant,font-weight,font-stretch,text-decoration,text-align,text-rendering,text-transform,white-space,font-size,line-height,letter-spacing,word-spaceing和font-family。

這里是開(kāi)發(fā)的CSS：

p {
text:300 uppercase dimgrey center 1.6rem 1.7 .05em;
}

這里是轉(zhuǎn)化后輸出的CSS：

p{
color:dimgrey;
font-weight:300;
text-align:center;
text-transform:uppercase;
font-size:25px;
font-size:1.6rem;
line-height:1.7;
letter-spaceing:.05em;
}

position屬性允許top,left,'right',bottom值包含在一個(gè)聲明中。值的順序是順時(shí)針?lè)较颉ＵZ(yǔ)法中取值從1到4，如果有一個(gè)值你想排除，只需使用*星號(hào)替換即可。

這里是開(kāi)發(fā)的CSS：

section{
position: absolute 10px * *;
}
.topNav{
position: fixed 0 * * 0;
}
.modal{
position: fixed 40% 25%;
}

這里是轉(zhuǎn)化后輸出的CSS：

section{
position:absolute;
top:10px;
}
.topNav{
position: fixed;
top:0;
left:0;
}
.modal{
position:fixed;
top:40%;
right:25%;
bottom:40%;
left:25%;
}

這對(duì)我們的行業(yè)意味著什么？

今天使用PostCSS完全有可能獲得實(shí)惠。就像編譯Sass和Less,你可以把PostCSS合并到你的工作流中，通過(guò)修改Task runner來(lái)處理PostCSS。合并的插件像PreCSS允許你將現(xiàn)有的Sass項(xiàng)目移植到PostCSS，而不需要做任何的語(yǔ)法轉(zhuǎn)化。

本文撰寫(xiě)之時(shí)，關(guān)于在什么地方寫(xiě)CSS最好的討論正在持續(xù)。伴隨著React庫(kù)越來(lái)越普及，在組件自身內(nèi)部寫(xiě)樣式，使用JavaScript直接轉(zhuǎn)換CSS進(jìn)行編譯，這種思路正蓄勢(shì)待發(fā)。雖然這仍然是個(gè)討論，但使用PostCSS轉(zhuǎn)換樣式確實(shí)是一種方法。

另一個(gè)在行業(yè)內(nèi)掀起波瀾的項(xiàng)目是CSS模塊, 樣式作用范圍在本地文件，需要使用時(shí)直接引用該文件。這個(gè)概念在JavaScript圈已經(jīng)非常流行。隨著前端語(yǔ)言之間的界線越來(lái)越模糊，比如React和JSX,CSS和JavaScript結(jié)合的能量不容忽視。

PostCSS通過(guò)自定義語(yǔ)法和屬性以嶄新方式擴(kuò)展CSS，它的復(fù)雜性也將會(huì)為試圖熟悉這個(gè)語(yǔ)言的初學(xué)者帶來(lái)新的挑戰(zhàn)。如果在項(xiàng)目中使用PostCSS的是一位年輕的開(kāi)發(fā)者，請(qǐng)多多鼓勵(lì)他深入了解CSS本身，以及理解PostCSS其實(shí)與Sass差不多，都是提高樣式編寫(xiě)效率的工具而已。

今天采用PostCSS

在接下來(lái)的幾年里，我們使用CSS的方式將會(huì)在許多不同的方面發(fā)生改變。每個(gè)項(xiàng)目會(huì)有不同的需求，我們將不得不調(diào)整我們的開(kāi)發(fā)方式。有了PostCSS這樣的模塊化生態(tài)系統(tǒng)，我們就可以根據(jù)項(xiàng)目需求選擇功能。

我鼓勵(lì)你去探索PostCSS的世界，并且探索它所有可用的插件。因?yàn)樗且粋€(gè)社區(qū)項(xiàng)目，只有人們?nèi)ナ褂盟?chuàng)建新的插件，這個(gè)生態(tài)系統(tǒng)才會(huì)成長(zhǎng)壯大。探索更多的插件，可以訪問(wèn)NPM的availabel packages，也可以在PostCSS Playground中測(cè)試插件的功能。

總結(jié)

以上是生活随笔為你收集整理的[译]PostCSS介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。