么是postcss?

官網(wǎng)介紹PostCss是一個(gè)允許使用JS插件轉(zhuǎn)換樣式的工具。這些插件可以檢查（lint）你的CSS，支持CSS Variables和Mixins，編譯尚未被瀏覽器廣泛支持的先進(jìn)的CSS語(yǔ)法，內(nèi)聯(lián)圖片，以及其它很多優(yōu)秀的功能。

那么它到底是什么呢。

我們先來(lái)介紹一下它最出名的最實(shí)用的插件 autoprefixer

autoprefixer是一個(gè)讓你偷懶的神器。如果你的項(xiàng)目是PC端，并且產(chǎn)品大大或者項(xiàng)目大大要求你兼容低版本IE，各種瀏覽器，是不是很頭疼。別擔(dān)心，用了autoprefixer，寫(xiě)正常的標(biāo)準(zhǔn)css就可以了，autoprefixer會(huì)自動(dòng)幫你添加瀏覽器前綴哦。

這樣寫(xiě)是不是很省事，很神奇。

除了這個(gè)用處外，國(guó)內(nèi)外大佬們?yōu)樗鼘?xiě)了非常多的插件。

這里為大家提供幾個(gè)插件。

cssnext

cssnext能夠讓你使用下一代css語(yǔ)法，如目前css4還沒(méi)有各瀏覽器支持，但是可以使用cssnext來(lái)把css4的語(yǔ)法翻譯成css3

posts-px2rem

使用移動(dòng)適配問(wèn)題的插件

posts-partial-import

讓你的css文件支持@import

precss

這是一個(gè)大雜燴，主要是為了滿(mǎn)足SASS開(kāi)發(fā)者的習(xí)慣，繼承了很多插件。

postcss-mixins 一個(gè)和SASS的mixins用法相同的插件

postcss-atroot 讓你的嵌套css處于根部

posts-extend 有相同結(jié)構(gòu)卻有那么一點(diǎn)點(diǎn)的區(qū)別，用這個(gè)可以方便同意管理相同部分樣式代碼

postcss是如何使用得

這里簡(jiǎn)單展示一下webpack+postcss得使用

首先需要安裝webpack中postcss得解析器 postcss-loader 還有我們需要使用得庫(kù)，這里我們只使用autoprefixer

	$ yarn add postcss-loader
	$ yarn add autoprefixer

之后在webpack.config.js module rule中加入postcss-loader

最后我們還得寫(xiě)postcss.config.js，添加你加入的那些插件，我們這邊只使用了autoprefixer

這樣我們就配置完成了個(gè)簡(jiǎn)單的postcss得項(xiàng)目了。

之后我會(huì)更加深入了解一下postcss其它插件得使用，會(huì)在以后為大家詳解。

希望大家喜歡，可以多多關(guān)注一下我。

么是CSS預(yù)處器

CSS預(yù)處理器是一種針對(duì)CSS樣式開(kāi)發(fā)的語(yǔ)言，有自己的變量、常量、條件語(yǔ)句以及編程語(yǔ)法，通過(guò)它可以簡(jiǎn)化CSS樣式，增加CSS特性，讓你的CSS更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，易于維護(hù)，開(kāi)發(fā)效率更高。最后編譯成正常的CSS文件，以供項(xiàng)目使用 。

為什么要使用CSS預(yù)處器

首先我們先了解下CSS，它主要是用來(lái)進(jìn)行網(wǎng)頁(yè)樣式設(shè)計(jì)的，通過(guò)CSS定義各標(biāo)簽的顯示樣式，可以實(shí)現(xiàn)各種外觀的定義以滿(mǎn)足項(xiàng)目的需求，實(shí)現(xiàn)想要的效果。所以我們要為每個(gè)標(biāo)簽去定義其樣式屬性，這樣就存在樣式單一、代碼重復(fù)、維護(hù)難、開(kāi)發(fā)效率低等問(wèn)題。而CSS預(yù)處器出現(xiàn)很好的解決了這些問(wèn)題，它以編程的思想對(duì)樣式進(jìn)行了很好的邏輯處理，可以定義常用變量，也可以定義方法調(diào)用，提高了代碼的復(fù)用性和使用性，同時(shí)也簡(jiǎn)化了CSS樣式編寫(xiě)，提高了代碼可讀性和維護(hù)性。

常見(jiàn)的CSS預(yù)處器

目前比較流行的CSS預(yù)處器主要有3種，分別是Sass、Less、Stylus。

Sass最成熟的一種CSS預(yù)處理器語(yǔ)言，它可以使用變量、常量、嵌套、混入、函數(shù)、繼承、導(dǎo)入等功能多種方法高效的輸出CSS樣式。新版的Scss也兼容CSS樣式

Less和CSS比較相似，同時(shí)兼容CSS樣式，相對(duì)來(lái)說(shuō)比較容易上手，同樣支持變量、常量、嵌套、混入、函數(shù)、繼承、導(dǎo)入等功能多種方法高效的輸出CSS樣式。

Stylus算新貴吧，簡(jiǎn)化了很多樣式書(shū)寫(xiě)形式，同樣支持變量、常量、嵌套、混入、函數(shù)、繼承、導(dǎo)入等功能多種方法高效的輸出CSS樣式。

安裝CSS預(yù)處器

我們?cè)趧?chuàng)建Vue項(xiàng)目的時(shí)候有個(gè)，Vue提供了幾個(gè)常用的組件模板供我們選擇，其中就有一項(xiàng)CSS Pre-processors（CSS預(yù)處理器）功能，Vue為我們提供了3中預(yù)處理方案，分別是Sass、Less、Stylus，選擇你想用的即可，項(xiàng)目搭建好之后就內(nèi)置了。

如果是已經(jīng)創(chuàng)建好的項(xiàng)目，我們可以自行安裝，如sass我們只需要執(zhí)行命令： npm install --save-dev sass-loader node-sass(sass-loader依賴(lài)node-sass),這樣我們就安裝好了sass。

安裝sass-loader時(shí)出現(xiàn)報(bào)錯(cuò)，萬(wàn)惡的公司網(wǎng)，不支持github訪問(wèn)....，既然用npm安裝出現(xiàn)安裝失敗，只能從淘寶鏡像下手了。通過(guò)命令安裝淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org，然后再使用淘寶鏡像安裝node-sass，命令如下：cnpm install node-sass --save-dev。

如果你覺(jué)得麻煩還有一種方法，可以在項(xiàng)目根目錄創(chuàng)建一個(gè) .npmrc 文件（也可以把這個(gè)文件放到你電腦的用戶(hù)目錄中），然后寫(xiě)入如下配置,這樣用npm install 安裝 node-sass js 時(shí)就會(huì)自動(dòng)從淘寶源上下載：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
proxy=****/我是公司網(wǎng)，必須配這個(gè)（正常網(wǎng)絡(luò)可以忽略）/****

使用CSS預(yù)處器

在組件中修改style標(biāo)簽，用lang屬性指定使用的CSS預(yù)處器類(lèi)型即可，即<style lang="scss" scoped>，然后在style中寫(xiě)scss語(yǔ)法的樣式即可(scss是sass的升級(jí)版，與css兼容，可以直接嵌套css樣式)，如下所示簡(jiǎn)單的設(shè)置了下svg樣式。

<template>
 <div class="home">
 <svg-icon icon-class="user"/>
 <div class="svg-container">
 <svg-icon icon-class="user"/>
 </div>
 </div>
</template>
<style lang="scss" scoped>
.home{
 background:rgb(121, 244, 248);
 position: relative;
 .svg-container{
 width:30px;
 height:50px;
 position: absolute;
 top:50px;
 right:150px;
 }
}
</style>

歡迎關(guān)注本人的公眾號(hào)：編程手札，文章也會(huì)在公眾號(hào)更新