一.什么是CSS的預(yù)處理器
CSS預(yù)處理器定義了一種新的語言括袒，基本的思想是用一種專門的編程語言，開發(fā)者只需要使用這種語言進(jìn)行編碼工作，減少枯燥無味的CSS代碼的編寫過程的同時(shí)，它能讓你的CSS具備更加簡潔殃姓、適應(yīng)性更強(qiáng)、可讀性更加瓦阐、層級關(guān)系更加明顯蜗侈、更易于代碼的維護(hù)等諸多好處
二.CSS的預(yù)處理器有哪些
CSS預(yù)處理器種類繁多，本次就以Sass垄分、Less宛篇、Stylus進(jìn)行比較。
三.CSS的預(yù)處理的比較
1.Scss
在線編譯器 https://www.sassmeister.com/
Sass 是一款強(qiáng)化 CSS 的輔助工具薄湿，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)叫倍、嵌套 (nested rules)、混合 (mixins)豺瘤、導(dǎo)入 (inline imports) 等高級功能吆倦，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件坐求，以及更高效地開發(fā)項(xiàng)目蚕泽。
- 1.特色功能
完全兼容 CSS3
在 CSS 基礎(chǔ)上增加變量、嵌套 (nesting)、混合 (mixins) 等功能
通過函數(shù)進(jìn)行顏色值與屬性值的運(yùn)算
提供控制指令 (control directives)等高級功能
自定義輸出格式
其實(shí)現(xiàn)在的Sass已經(jīng)有了兩套語法規(guī)則：一個(gè)依舊是用縮進(jìn)作為分隔符來區(qū)分代碼塊的须妻；另一套規(guī)則和CSS一樣采用了大括號（｛｝）作為分隔符仔蝌。后一種語法規(guī)則又名SCSS，在Sass3之后的版本都支持這種語法規(guī)則荒吏。
注：Sass官網(wǎng)地址：http://sass-lang.com
- 2.Less
2009年開源的一個(gè)項(xiàng)目敛惊，受Sass的影響較大，但又使用CSS的語法绰更，讓大部分開發(fā)者和設(shè)計(jì)師更容易上手瞧挤。LESS提供了多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn)的CSS代碼，在很多流行的框架和工具中已經(jīng)能經(jīng)忱芡澹看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）特恬。
根據(jù)維基百科上的介紹，其實(shí)LESS是Alexis Sellier受Sass的影響創(chuàng)建的一個(gè)開源項(xiàng)目徐钠。當(dāng)時(shí)SASS采用了縮進(jìn)作為分隔符來區(qū)分代碼塊癌刽，而不是CSS中廣為使用的大括號（｛｝）。為了讓CSS現(xiàn)有的用戶使用起來更佳方便丹皱，Alexis開發(fā)了LESS并提供了類似CSS的書寫功能妒穴。
注：LESS的官網(wǎng)：http://lesscss.org
- 3.Stylus
中文文檔 https://www.zhangxinxu.com/jq/stylus/
Stylus，2010年產(chǎn)生摊崭，來自于Node.js社區(qū)，主要用來給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持杰赛，在此社區(qū)之內(nèi)有一定支持者呢簸，在廣泛的意義上人氣還完全不如Sass和LESS。
Stylus被稱為是一種革命性的新語言乏屯，提供一個(gè)高效根时、動(dòng)態(tài)、和使用表達(dá)方式來生成CSS辰晕，以供瀏覽器使用蛤迎。Stylus同時(shí)支持縮進(jìn)和CSS常規(guī)樣式書寫規(guī)則。
注：Stylus官網(wǎng)：http://learnboost.github.com/stylus
預(yù)處理器的安裝可以參照此網(wǎng) https://blog.csdn.net/ly2983068126/article/details/77737292
四.語法
在使用CSS預(yù)處理器之前最重要的是了解語法與大家對比分享含友。
首先Sass和Less都是用的是標(biāo)準(zhǔn)的CSS語法替裆，因此你可以很方便的把已完成的CSS代碼轉(zhuǎn)為預(yù)處理器識別的代碼，Sass默認(rèn)使用 .sass擴(kuò)展名窘问，而Less默認(rèn)使用.Less擴(kuò)展名辆童，Stylus的默認(rèn)使用.styl擴(kuò)展名。
語法：
Scass
Sass3.0版本開始使用的是標(biāo)準(zhǔn)的CSS語法惠赫，和SCSS可以說是一樣的把鉴。這樣Sass代碼轉(zhuǎn)換成CSS代碼變得更容易。默認(rèn)Sass使用“.scss”擴(kuò)展名儿咱。Sass語法規(guī)則可以像CSS那樣書寫：
/*style.sass新版語法規(guī)則*/
h1{
color:#936;
background-color:#333;
}
正如你所看到的庭砍，在Sass樣式中场晶，這樣的代碼是在簡單不過的了。
重要的一點(diǎn)是怠缸，Sass也同時(shí)支持老的語法诗轻，老的語法和常規(guī)的CSS語法略有不同，他需要嚴(yán)格的語法凯旭，任何的縮進(jìn)和字符的錯(cuò)誤都會(huì)造成樣式的編譯錯(cuò)誤概耻。Sass可以省略大括號（｛｝）和分號（；）罐呼，完全依靠嚴(yán)格的縮進(jìn)和格式化代碼鞠柄，而且文件使用“.sass”擴(kuò)展名，他的語法類似于：
/*style.sass*/
h1
color:#936
background-color: #333
Less
LESS是CSS的一種擴(kuò)展形式嫉柴，它并沒有閹割CSS的功能厌杜，而是在現(xiàn)有的CSS語法上，添加了很多額外的功能计螺。就語法規(guī)則而言夯尽，LESS和Sass一樣，都是使用CSS的標(biāo)準(zhǔn)語法登馒，只是LESS的源文件的擴(kuò)展名是“.less”匙握，其基本語法類似于：
/*style.less*/
h1 {
color: #963;
background-color: #333;
}
Stylus
Stylus的語法花樣多一些，它的文件擴(kuò)展名是“.styl”陈轿，Stylus也接受標(biāo)準(zhǔn)的CSS語法圈纺，但是他也像Sass老的語法規(guī)則，使用縮進(jìn)控制麦射，同時(shí)Stylus也接受不帶大括號（｛｝）和分號的語法蛾娶，如下所示：
/*style.styl*/
/*類似于CSS標(biāo)準(zhǔn)語法*/
h1 {
color: #963;
background-color:#333;
}
/*省略大括號（｛｝）*/
h1
color: #963;
background-color: #333;
/*省略大括號（｛｝）和分號（;）*/
h1
color:#963
background-color:#333
在Stylus樣式中，你也可以在同一個(gè)樣式文件中使用不同的語法規(guī)則潜秋，下面這樣的寫法也不會(huì)報(bào)錯(cuò)：
/*style.styl*/
h1 {
color #963
}
h2
font-size:1.2em
變量
你可以在 CSS 預(yù)處理器中聲明變量蛔琅，并在整個(gè)樣式單中使用，支持任何類型的變量峻呛，例如顏色罗售、數(shù)值（不管是否包括單位）、文本杀饵。然后你可以任意引用該變量莽囤。
Sass 的變量必須是 $ 開始，然后變量名和值使用冒號隔開切距，跟 CSS 的屬性一致：
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
而 Less 的變量名使用 @ 符號開始：
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
Stylus 對變量名沒有任何限定朽缎，你可以是 $ 開始，也可以是任意的字符，而且與變量值之間可以用冒號话肖、空格隔開北秽，需要注意的是 Stylus (0.22.4) 將會(huì)編譯 @ 開始的變量，但其對應(yīng)的值并不會(huì)賦予該變量最筒，換句話說贺氓，在 Stylus 的變量名不要用 @ 開頭。
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth
上面的三種不同的 CSS 預(yù)處理器的寫法床蜘，最終都將產(chǎn)生相同的結(jié)果：
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
你可以想象辙培，加入你的 CSS 中使用了某個(gè)顏色的地方多達(dá)數(shù)十次，那么要修改顏色時(shí)你必須找到這數(shù)十次的地方并一一修改邢锯，而有了 CSS 預(yù)處理器扬蕊，修改一個(gè)地方就夠了！
嵌套
如果我們需要在CSS中相同的 parent 引用多個(gè)元素丹擎，這將是非常乏味的尾抑，你需要一遍又一遍地寫 parent。例如：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
而如果用 CSS 預(yù)處理器蒂培，就可以少些很多單詞再愈，而且父子節(jié)點(diǎn)關(guān)系一目了然。我們這里提到的三個(gè) CSS 框架都是允許嵌套語法：
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
最終生成的 CSS 結(jié)果是：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Mixins (混入)
Mixins 有點(diǎn)像是函數(shù)或者是宏护戳，當(dāng)你某段 CSS 經(jīng)常需要在多個(gè)元素中使用時(shí)翎冲，你可以為這些共用的 CSS 定義一個(gè) Mixin，然后你只需要在需要引用這些 CSS 地方調(diào)用該 Mixin 即可媳荒。
Sass 的混入語法：
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@ include error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}
Less CSS 的混入語法：
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}
Stylus 的混入語法：
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}
最終它們都將編譯成如下的 CSS 樣式：
error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
繼承
當(dāng)我們需要為多個(gè)元素定義相同樣式的時(shí)候府适，我們可以考慮使用繼承的做法。例如我們經(jīng)常需要：
p,
ul,
ol {
/* styles here */
}
在 Sass 和 Stylus 我們可以這樣寫：
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}
在這里首先定義 .block 塊肺樟，然后讓 p 、ul 和 ol 元素繼承 .block 逻淌，最終生成的 CSS 如下：
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
在這方面 Less 表現(xiàn)的稍微弱一些么伯，更像是混入寫法：
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
.block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}```
生成的 CSS 如下：
```.block {
margin: 10px 5px;
padding: 2px;
}
p {
margin: 10px 5px;
padding: 2px;
border: 1px solid #EEE;
}
ul,
ol {
margin: 10px 5px;
padding: 2px;
color: #333;
text-transform: uppercase;
}
你所看到的上面的代碼中，.block 的樣式將會(huì)被插入到相應(yīng)的你想要繼承的選擇器中卡儒，但需要注意的是優(yōu)先級的問題田柔。
導(dǎo)入 (Import)
很多 CSS 開發(fā)者對導(dǎo)入的做法都不太感冒，因?yàn)樗枰啻蔚?HTTP 請求骨望。但是在 CSS 預(yù)處理器中的導(dǎo)入操作則不同硬爆，它只是在語義上包含了不同的文件，但最終結(jié)果是一個(gè)單一的 CSS 文件擎鸠，如果你是通過 @ import "file.css"; 導(dǎo)入 CSS 文件缀磕，那效果跟普通的 CSS 導(dǎo)入一樣。注意：導(dǎo)入文件中定義的混入、變量等信息也將會(huì)被引入到主樣式文件中袜蚕，因此需要避免它們互相沖突糟把。
reset.css:
body {
background: #EEE;
}
main.xxx:
@ import "file.{type}";
p {
background: #0982C1;
}
最終生成的 CSS：
@ import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
顏色函數(shù)
CSS 預(yù)處理器一般都會(huì)內(nèi)置一些顏色處理函數(shù)用來對顏色值進(jìn)行處理，例如加亮牲剃、變暗遣疯、顏色梯度等。
Sass：
darken($color, 10%); /* returns a color 10% darker than $color */
saturate($color, 10%); /* returns a color 10% more saturated than $color */
desaturate($color, 10%); /* returns a color 10% less saturated than $color */
grayscale($color); /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color); /* returns inverted color of $color */
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */
上面只是簡單列了 Sass 的一些基本顏色處理函數(shù)凿傅，完整的列表請看 Sass Documentation.
下面是一個(gè)具體的例子：
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
Less CSS:
darken(@color, 10%); /* returns a color 10% darker than @color */
saturate(@color, 10%); /* returns a color 10% more saturated than @color */
desaturate(@color, 10%); /* returns a color 10% less saturated than @color */
spin(@color, 10); /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */
mix(@color1, @color2); /* return a mix of @color1 and @color2 */
LESS 完整的顏色函數(shù)列表請看 LESS Documentation.
LESS 使用顏色函數(shù)的例子：
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus:
darken(color, 10%); /* returns a color 10% darker than 'color' */
saturate(color, 10%); /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
Stylus完整的顏色函數(shù)列表請閱讀 Stylus Documentation.
實(shí)例：
h1
background color
border 3px solid darken(color, 50%)
運(yùn)算符
你可以直接在 CSS 預(yù)處理器中進(jìn)行樣式的計(jì)算缠犀，例如：
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}
一些跟具體瀏覽器相關(guān)的處理
這是宣傳使用預(yù)處理的原因之一，并且是一個(gè)很好的理由聪舒，這樣可以節(jié)省的大量的時(shí)間和汗水辨液。創(chuàng)建一個(gè)mixin來處理不同瀏覽器的CSS寫法是很簡單的，節(jié)省了大量的重復(fù)工作和痛苦的代碼編輯过椎。
Sass
-webkit-border-radius: $values;
-moz-border-radius: $values;
border-radius: $values;
}
div {
@ include border-radius(10px);
}
Less CSS
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
.border-radius(10px);
}
Stylus
-webkit-border-radius: values;
-moz-border-radius: values;
border-radius: values;
}
div {
border-radius(10px);
}
編譯結(jié)果：
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
注釋
以上三種框架都支持形如 / / 的多行注釋以及 // 的單行注釋室梅。
