這篇文章主要介紹css預(yù)處理器指的是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
10年積累的成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有三穗免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
CSS預(yù)處理器是一種專(zhuān)門(mén)的編程語(yǔ)言，用來(lái)為CSS增加一些編程特性（CSS本身不是編程語(yǔ)言）。不需考慮瀏覽器兼容問(wèn)題，因?yàn)镃SS預(yù)處理器最終編譯和輸出的仍是標(biāo)準(zhǔn)的CSS樣式。可以在CSS預(yù)處理器中：使用變量、簡(jiǎn)單邏輯判斷、函數(shù)等基本編程技巧。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。
CSS(Cascading Style Sheet)被譯為級(jí)聯(lián)樣式表，做為一名前端從業(yè)人員來(lái)說(shuō)，這個(gè)專(zhuān)業(yè)名詞并不陌生，在行業(yè)中通常稱(chēng)之為“風(fēng)格樣式表（Style Sheet）”，它主要是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML（XHTML）中各標(biāo)簽的顯示屬性?？梢允谷烁苡行У目刂芖eb頁(yè)面（或Web應(yīng)用程序）外觀(guān)，可以精確指定Web元素位置，外觀(guān)以及創(chuàng)建特殊效果的能力。CSS擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù) 不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫(xiě)法，針對(duì)各類(lèi)人群有較強(qiáng)的易讀性。
就CSS本身而言，對(duì)于大多數(shù)Web前端從業(yè)人員來(lái)說(shuō)就不是問(wèn)題。學(xué)過(guò)CSS的人都知道，它不是一種編程語(yǔ)言。你可以用它開(kāi)發(fā)網(wǎng)頁(yè)樣式，但是沒(méi)法用它編程。換句話(huà)說(shuō)，CSS基本上是設(shè)計(jì)師的工具，不是程序員的工具。在程序員的眼里，CSS是很頭痛的事情，它并不像其它程序語(yǔ)言，比如說(shuō)PHP、Javascript等等，有自己的變量、常量、條件語(yǔ)句以及一些編程語(yǔ)法，只是一行行單純的屬性描述，寫(xiě)起來(lái)相當(dāng)?shù)馁M(fèi)事，而且代碼難易組織和維護(hù)。
很自然的，有人就開(kāi)始在想，能不能給CSS像其他程序語(yǔ)言一樣，加入一些編程元素，讓CSS能像其他程序語(yǔ)言一樣可以做一些預(yù)定的處理。這樣一來(lái)，就有了“CSS預(yù)處器（CSS Preprocessor）”。
CSS預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專(zhuān)門(mén)的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。通俗的說(shuō)，CSS預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行Web頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。CSS預(yù)處理器為CSS增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題，例如你可以在CSS中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)等等在編程語(yǔ)言中的一些基本特性，可以讓你的CSS更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。
CSS預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了很多種不同的CSS預(yù)處理器語(yǔ)言，比如說(shuō)：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預(yù)處理器，那么“我應(yīng)該選擇哪種CSS預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門(mén)話(huà)題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術(shù)論壇上，很多人為此爭(zhēng)論不休。相比過(guò)計(jì)我們對(duì)是否應(yīng)該使用CSS預(yù)處理器的話(huà)題而言，這已經(jīng)是很大的進(jìn)步了。
到目前為止，在眾多優(yōu)秀的CSS預(yù)處理器語(yǔ)言中就屬Sass、LESS和Stylus最優(yōu)秀，討論的也多，對(duì)比的也多。本文將分別從他們產(chǎn)生的背景、安裝、使用語(yǔ)法、異同等幾個(gè)對(duì)比之處向你介紹這三款CSS預(yù)處理器語(yǔ)言。相信前端開(kāi)發(fā)工程師會(huì)做出自己的選擇——我要選擇哪款CSS預(yù)處理器。
（學(xué)習(xí)視頻分享：css視頻教程）
為了能更好的了解這三款流行的CSS預(yù)處理器，我們先從其背景入手，簡(jiǎn)單的了解一下各自的背景信息。
1.Sass背景介紹
Sass是對(duì)CSS（層疊樣式表）的語(yǔ)法的一種擴(kuò)充，誕生于2007年，最早也是最成熟的一款CSS預(yù)處理器語(yǔ)言，它可以使用變量、常量、嵌套、混入、函數(shù)等功能，可以更有效有彈性的寫(xiě)出CSS。Sass最后還是會(huì)編譯出合法的CSS讓瀏覽器使用，也就是說(shuō)它本身的語(yǔ)法并不太容易讓瀏覽器識(shí)別，因?yàn)樗皇菢?biāo)準(zhǔn)的CSS格式，在它的語(yǔ)法內(nèi)部可以使用動(dòng)態(tài)變量等，所以它更像一種極簡(jiǎn)單的動(dòng)態(tài)語(yǔ)言。
其實(shí)現(xiàn)在的Sass已經(jīng)有了兩套語(yǔ)法規(guī)則：一個(gè)依舊是用縮進(jìn)作為分隔符來(lái)區(qū)分代碼塊的；另一套規(guī)則和CSS一樣采用了大括號(hào)（｛｝）作為分隔符。后一種語(yǔ)法規(guī)則又名SCSS，在Sass3之后的版本都支持這種語(yǔ)法規(guī)則。
注：Sass官網(wǎng)地址：http://sass-lang.com
2.LESS的背景介紹
2009年開(kāi)源的一個(gè)項(xiàng)目，受Sass的影響較大，但又使用CSS的語(yǔ)法，讓大部分開(kāi)發(fā)者和設(shè)計(jì)師更容易上手。LESS提供了多種方式能平滑的將寫(xiě)好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn)的CSS代碼，在很多流行的框架和工具中已經(jīng)能經(jīng)?？吹絃ESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
根據(jù)維基百科上的介紹，其實(shí)LESS是Alexis Sellier受Sass的影響創(chuàng)建的一個(gè)開(kāi)源項(xiàng)目。當(dāng)時(shí)SASS采用了縮進(jìn)作為分隔符來(lái)區(qū)分代碼塊，而不是CSS中廣為使用的大括號(hào)（｛｝）。為了讓CSS現(xiàn)有的用戶(hù)使用起來(lái)更佳方便，Alexis開(kāi)發(fā)了LESS并提供了類(lèi)似CSS的書(shū)寫(xiě)功能。
注：LESS的官網(wǎng)：http://lesscss.org
3.Stylus背景介紹
Stylus，2010年產(chǎn)生，來(lái)自于Node.js社區(qū)，主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如Sass和LESS。
Stylus被稱(chēng)為是一種革命性的新語(yǔ)言，提供一個(gè)高效、動(dòng)態(tài)、和使用表達(dá)方式來(lái)生成CSS，以供瀏覽器使用。Stylus同時(shí)支持縮進(jìn)和CSS常規(guī)樣式書(shū)寫(xiě)規(guī)則。
注：Stylus官網(wǎng)：http://learnboost.github.com/stylus
每一種語(yǔ)言都有自己一定的語(yǔ)法規(guī)則，CSS預(yù)處理器語(yǔ)言也不例外，在真正使用CSS預(yù)處器語(yǔ)言之前還有一個(gè)不可缺少的知識(shí)點(diǎn)，就是對(duì)語(yǔ)法的理解。值得慶幸的是，這三款CSS預(yù)處理器語(yǔ)言的語(yǔ)法和CSS語(yǔ)法都差不多。
1.Sass語(yǔ)法
Sass3.0版本開(kāi)始使用的是標(biāo)準(zhǔn)的CSS語(yǔ)法，和SCSS可以說(shuō)是一樣的。這樣Sass代碼轉(zhuǎn)換成CSS代碼變得更容易。默認(rèn)Sass使用“.scss”擴(kuò)展名。Sass語(yǔ)法規(guī)則可以像CSS那樣書(shū)寫(xiě)：
重慶分公司
重慶分公司
/*style.sass新版語(yǔ)法規(guī)則*/
h2{
color:#936;
background-color:#333;
}正如你所看到的，在Sass樣式中，這樣的代碼是在簡(jiǎn)單不過(guò)的了。
重要的一點(diǎn)是，Sass也同時(shí)支持老的語(yǔ)法，老的語(yǔ)法和常規(guī)的CSS語(yǔ)法略有不同，他需要嚴(yán)格的語(yǔ)法，任何的縮進(jìn)和字符的錯(cuò)誤都會(huì)造成樣式的編譯錯(cuò)誤。Sass可以省略大括號(hào)（｛｝）和分號(hào)（；），完全依靠嚴(yán)格的縮進(jìn)和格式化代碼，而且文件使用“.sass”擴(kuò)展名，他的語(yǔ)法類(lèi)似于：
/*style.sass*/ h2 color:#936 background-color: #333
2.LESS語(yǔ)法
LESS是CSS的一種擴(kuò)展形式，它并沒(méi)有閹割CSS的功能，而是在現(xiàn)有的CSS語(yǔ)法上，添加了很多額外的功能。就語(yǔ)法規(guī)則而言，LESS和Sass一樣，都是使用CSS的標(biāo)準(zhǔn)語(yǔ)法，只是LESS的源文件的擴(kuò)展名是“.less”，其基本語(yǔ)法類(lèi)似于：
/*style.less*/
h2 {
color: #963;
background-color: #333;
}3.Stylus語(yǔ)法
Stylus的語(yǔ)法花樣多一些，它的文件擴(kuò)展名是“.styl”，Stylus也接受標(biāo)準(zhǔn)的CSS語(yǔ)法，但是他也像Sass老的語(yǔ)法規(guī)則，使用縮進(jìn)控制，同時(shí)Stylus也接受不帶大括號(hào)（｛｝）和分號(hào)的語(yǔ)法，如下所示：
/*style.styl*/
/*類(lèi)似于CSS標(biāo)準(zhǔn)語(yǔ)法*/
h2 {
color: #963;
background-color:#333;
}
/*省略大括號(hào)（｛｝）*/
h2
color: #963;
background-color: #333;
/*省略大括號(hào)（｛｝）和分號(hào)（;）*/
h2
color:#963
background-color:#333在Stylus樣式中，你也可以在同一個(gè)樣式文件中使用不同的語(yǔ)法規(guī)則，下面這樣的寫(xiě)法也不會(huì)報(bào)錯(cuò)：
/*style.styl*/
h2 {
color #963
}
h3
font-size:1.2em這三款CSS預(yù)處理器語(yǔ)言具有一些相同的特性，例如：變量、混入、嵌套、函數(shù)等。在這一節(jié)中，我們依次來(lái)對(duì)比一下這三款CSS預(yù)處理器語(yǔ)言各種特性的異同之處，以及使用方法。
1.變量（Variables）
如果你是一個(gè)開(kāi)發(fā)人員，變量應(yīng)該是你最好朋友之一。在CSS預(yù)處理器語(yǔ)言中你也可以聲明變量，并在整個(gè)樣式表中使用。CSS預(yù)處理器語(yǔ)言支持任何變量（例如：顏色、數(shù)值、文本）。然后你可以在任意地方引用變量。
a)Sass的變量
Sass聲明變量必須是“$”開(kāi)頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號(hào)（：）分隔開(kāi)。就像CSS屬性設(shè)置一樣：
/*聲明變量*/
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
/*調(diào)用變量*/ | /*轉(zhuǎn)譯出來(lái)的CSS*/
------------------------------------------+------------------------------
body { | body {
color: $mainColor; | color: #963;
border:1px $borderStyle $mainColor; | border:1px dotted #963;
max-width: $siteWidth; | max-width: 1024px;
} | } | }b)LESS的變量
LESS樣式中聲明變量和調(diào)用變量和Sass一樣，唯一的區(qū)別就是變量名前面使用的是“@”字符：
/*聲明變量*/
@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;
/*調(diào)用變量*/ | /*轉(zhuǎn)譯出來(lái)的CSS*/
----------------------------------------+-------------------------------
body { | body {
color: @mainColor; | color:#963;
border:1px @borderStyle @mainColor; | border:1px dotted #963;
max-width: @siteWidth; | max-width:1024px;
} | }c)Stylus的變量
Stylus樣式中聲明變量沒(méi)有任何限定，你可以使用“$”符號(hào)開(kāi)始。結(jié)尾的分號(hào)（;）可有可無(wú)，但變量名和變量值之間的等號(hào)（=）是需要的。有一點(diǎn)需要注意的是，如果我們使用“@”符號(hào)開(kāi)頭來(lái)聲明（0.22.4）變量，Stylus會(huì)進(jìn)行編譯，但其對(duì)應(yīng)的值并不會(huì)賦值給變量。換句話(huà)說(shuō)，在Stylus中不要使用“@”符號(hào)開(kāi)頭聲明變量。Stylus中調(diào)用變量的方法和LESS、Sass是完全相同的。
/*聲明變量*/
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
/*調(diào)用變量*/ | /*轉(zhuǎn)譯出來(lái)的CSS*/
----------------------------------------+--------------------------------
body | body {
color mainColor | color: #963;
border 1px $borderStyle mainColor | border:1px dotted #963
max-width siteWidth | max-width:1024px;
| }Stylus還有一個(gè)獨(dú)特功能，不需要分配值給變量就可以定義引用屬性：
/*水平垂直居中*/ | /*轉(zhuǎn)譯出來(lái)的CSS*/
------------------------------------+------------------------------------
#logo | #logo {
position absolute | position:absolute;
top 50% | top:50%;
left 50% | left:50%;
width w = 150px | width:150px;
height h = 80px | height:80px;
margin-left -(w / 2) | margin-left:-75px;
margin-top -(h / 2) | margin-top:-40px;
| }從上面的代碼中我們可以看出，CSS預(yù)處理器語(yǔ)言中的變量是值級(jí)別的重復(fù)使用，可以將相同的值定義成變量統(tǒng)一管理起來(lái)。
CSS預(yù)處理器語(yǔ)言中變量的特性適用于定義主題（也就是我們常說(shuō)的換膚），我們可以將背景顏色、字體顏色、邊框?qū)傩缘瘸Ｒ?guī)樣式統(tǒng)一定義，這樣不同的主題只需要定義不同的變量文件就可以。
2.作用域（Scope）
CSS預(yù)處理器語(yǔ)言中的變量和其他程序語(yǔ)言一樣，可以實(shí)現(xiàn)值的復(fù)用，同樣它也存在生命周期，也就是Scope（變量范圍，開(kāi)發(fā)人員習(xí)慣稱(chēng)之為作用域），簡(jiǎn)單點(diǎn)講就是局部變量還是全局變量的概念，查找變量的順序是先在局部定義中找，如果找不到，則查找上級(jí)定義，直至全局。下面我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)解釋這三款CSS預(yù)處理器的作用域使用。
a)Sass的作用域
Sass中作用域在這三款預(yù)處理器是最差的，可以說(shuō)在Sass中是不存在什么全局變量。具體來(lái)看下面的代碼：
/*Sass樣式*/
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}先看轉(zhuǎn)譯出來(lái)的CSS樣式：
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色（無(wú)全局變量概念）*/
}示例明顯的告訴我們，在Sass樣式中定義變量，調(diào)用變量是沒(méi)有全局變量一個(gè)概念存在，因此在Sass中定義了相同變量名時(shí)，在調(diào)用之時(shí)千萬(wàn)要多加小心，不然會(huì)給你的樣式帶來(lái)錯(cuò)誤。
b)LESS的作用域
LESS中的作用域和其他程序語(yǔ)言中的作用域非常的相同，他首先會(huì)查找局部定義的變量，如果沒(méi)有找到，會(huì)像冒泡一樣，一級(jí)一級(jí)往下查找，直到根為止，同樣上面的例子，我們來(lái)看看他在LESS下所起的變化。
/*LESS樣式*/
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}轉(zhuǎn)譯出來(lái)的CSS樣式：
.scoped {
color:white;/*白色（調(diào)用了局部變量）*/
background-color:blue;
}
.unscoped {
color:black;/*黑色（調(diào)用了全局變量）*/
}c)Stylus的作用域
Stylus雖然起步比較晚，但其作用域的特性和LESS一樣，可以支持全局變量和局變量。會(huì)向上冒泡查找，直到根為止。
3.混合(Mixins)
Mixins是CSS預(yù)處理器中語(yǔ)言中最強(qiáng)大的特性，簡(jiǎn)單點(diǎn)來(lái)說(shuō)，Mixins可以將一部分樣式抽出，作為單獨(dú)定義的模塊，被很多選擇器重復(fù)使用。平時(shí)你在寫(xiě)樣式時(shí)肯定有碰到過(guò)，某段CSS樣式經(jīng)常要用到多個(gè)元素中，這樣你就需要重復(fù)的寫(xiě)多次。在CSS預(yù)處理器語(yǔ)言中，你可以為這些公用的CSS樣式定義一個(gè)Mixin，然后在你CSS需要使用這些樣式的地方直接調(diào)用你定義好的Mixin。這是一個(gè)非常有用的特性，Mixins被當(dāng)作一個(gè)公認(rèn)的選擇器，還可以在Mixins中定義變量或者默認(rèn)參數(shù)。
a)Sass的混合
Sass樣式中聲明Mixins時(shí)需要使用“@mixin”，然后后面緊跟Mixins的名，他也可以定義參數(shù)，同時(shí)可以給這個(gè)參數(shù)設(shè)置一個(gè)默認(rèn)值，但參數(shù)名是使用“$”符號(hào)開(kāi)始，而且和參數(shù)值之間需要使用冒號(hào)（：）分開(kāi)。
在選擇器調(diào)用定義好的Mixins需要使用“@include”，然后在其后緊跟你要調(diào)用的Mixins名。不過(guò)在Sass中還支持老的調(diào)用方法，就是使用加號(hào)“+”調(diào)用Mixins，在“+”后緊跟Mixins名。
一起來(lái)看個(gè)簡(jiǎn)單的例子，比如說(shuō)在你的Sass樣式中定義了一個(gè)名叫“error”的Mixin，這個(gè)“error”設(shè)置了一個(gè)參數(shù)“$borderWidth”，在沒(méi)特別定義外，這個(gè)參數(shù)的默認(rèn)值設(shè)置為“2px”：
/*聲明一個(gè)Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*調(diào)用error Mixins*/
.generic-error {
@include error();/*直接調(diào)用error mixins*/
}
.login-error {
@include error(5px);/*調(diào)用error mixins，并將參數(shù)$borderWidth的值重定義為5px*/
}b)LESS的混合
在LESS中，混合是指將定義好的“ClassA”中引入另一個(gè)已經(jīng)定義的“Class”，就像在當(dāng)前的“Class”中增加一個(gè)屬性一樣。
不過(guò)LESS樣式中聲明Mixins和Sass聲明方法不一樣，他更像CSS定義樣式，在LESS可以將Mixins看成是一個(gè)類(lèi)選擇器，當(dāng)然Mixins也可以設(shè)置參數(shù)，并給參數(shù)設(shè)置默認(rèn)值。不過(guò)設(shè)置參數(shù)的變量名是使用“@”開(kāi)頭，同樣參數(shù)和默認(rèn)參數(shù)值之間需要使用冒號(hào)（：）分隔開(kāi)。
正如Sass混合是的示例，同樣在LESS樣式中定義一個(gè)名叫“error”的Mixin，這個(gè)“error”設(shè)置了一個(gè)參數(shù)“@borderWidth”，在沒(méi)有特別定義外，這個(gè)參數(shù)的默認(rèn)值是“2px”：
/*聲明一個(gè)Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*調(diào)用error Mixins*/
.generic-error {
.error();/*直接調(diào)用error mixins*/
}
.login-error {
.error(5px);/*調(diào)用error mixins，并將參數(shù)@borderWidth的值重定義為5px*/
}c)Stylus的混合
Stylus中的混合和前兩款CSS預(yù)處理器語(yǔ)言的混合略有不同，他可以不使用任何符號(hào)，就是直接聲明Mixins名，然后在定義參數(shù)和默認(rèn)值之間用等號(hào)（=）來(lái)連接。
/*聲明一個(gè)Mixin叫作“error”*/
error(borderWidth=2px){
border:borderWidth solid #f00;
color: #f00;
}
/*調(diào)用error Mixins*/
.generic-error {
error();/*直接調(diào)用error mixins*/
}
.login-error {
error(5px);/*調(diào)用error mixins，并將參數(shù)$borderWidth的值重定義為5px*/
}三個(gè)示例都將會(huì)轉(zhuǎn)譯成相同的CSS代碼：
.generic-error {
border: 2px solid #f00;
color:#f00;
}
.login-error {
border:5px solid #f00;
color: #f00;
}4.嵌套（Nesting）
CSS預(yù)處理器語(yǔ)言中的嵌套指的是在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承，從而減少代碼量，并且增加了代碼的可讀性。比如說(shuō)，我們?cè)贑SS中多個(gè)元素有一個(gè)相同的父元素，那么寫(xiě)樣式會(huì)變得很乏味，我們需要一遍一遍的在每個(gè)元素前寫(xiě)這個(gè)父元素，除非給特定的元素添加類(lèi)名“class”或者ID。
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}相反，使用CSS預(yù)處理器語(yǔ)言的嵌套特性，我們可以在父元素的大括號(hào)（｛｝）里寫(xiě)這些元素。同時(shí)可以使用“&”符號(hào)來(lái)引用父選擇器。對(duì)于Sass、LESS和Stylus這三款CSS預(yù)處理器語(yǔ)言的嵌套選擇器來(lái)說(shuō)，他們都具有相同的語(yǔ)法：
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}上面的預(yù)處理器轉(zhuǎn)譯出來(lái)的CSS代碼和我們開(kāi)始展示的CSS代碼是相同的，非常的方便吧！
5.繼承（Inheritance）
對(duì)于熟悉CSS的同學(xué)來(lái)說(shuō)，對(duì)于屬性的繼承并不陌生。平時(shí)在寫(xiě)CSS樣式常碰到多個(gè)元素應(yīng)用相同的樣式時(shí)，我們?cè)贑SS中通常都是這樣寫(xiě)：
p,ul,ol{/*樣式寫(xiě)在這里*/}這樣做非常的好，但往往我們需要給單獨(dú)元素添加另外的樣式，這個(gè)時(shí)候我們就需要把其中選擇器單獨(dú)出來(lái)寫(xiě)樣式，如此一來(lái)我們維護(hù)樣式就相當(dāng)?shù)穆闊?。為了?yīng)對(duì)這個(gè)問(wèn)題，CSS預(yù)處理器語(yǔ)言可以從一個(gè)選擇繼承另個(gè)選擇器下的所有樣式。
a)Sass和Stylus的繼承
Sass和Stylus的繼承是把一個(gè)選擇器的所有樣式繼承到另個(gè)選擇器上。在繼承另個(gè)選擇器的樣式時(shí)需要使用“@extend”開(kāi)始，后面緊跟被繼承的選擇器：
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*繼承.block選擇器下所有樣式*/
border: 1px solid #eee;
}
ul,ol {
@extend .block; /*繼承.block選擇器下所有樣式*/
color: #333;
text-transform: uppercase;
}上面的代碼轉(zhuǎn)譯成CSS：
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee
}
ul,ol {
color:#333;
text-transform:uppercase;
}b)LESS的繼承
LESS支持的繼承和Sass與Stylus不一樣，他不是在選擇器上繼承，而是將Mixins中的樣式嵌套到每個(gè)選擇器里面。這種方法的缺點(diǎn)就是在每個(gè)選擇器中會(huì)有重復(fù)的樣式產(chǎn)生。
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*繼承.block選擇器下所有樣式*/
border: 1px solid #eee;
}
ul,ol {
.block; /*繼承.block選擇器下所有樣式*/
color: #333;
text-transform: uppercase;
}轉(zhuǎn)譯出來(lái)的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)先級(jí)的問(wèn)題。
6.運(yùn)算符（Operations）
CSS預(yù)處理器語(yǔ)言還具有運(yùn)算的特性，其簡(jiǎn)單的講，就是對(duì)數(shù)值型的Value（如：數(shù)字、顏色、變量等）進(jìn)行加減乘除四則運(yùn)算。這樣的特性在CSS樣式中是想都不敢想的，但在CSS預(yù)處理器語(yǔ)言中對(duì)樣式做一些運(yùn)算一點(diǎn)問(wèn)題都沒(méi)有了，例如：
@base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2;
上面代碼是LESS的運(yùn)算示例，聲明一下，在取得“@quarter_page”變量時(shí)，我們可以直接除以4，但是在這里，我們只是想演示一下圓括號(hào)組成的“運(yùn)算順序”（這個(gè)運(yùn)算順序小學(xué)生也知道）。在復(fù)合型運(yùn)算中，小括號(hào)也是很有必要的，例如：
border: (@width / 2) solid #000;
Sass在數(shù)字運(yùn)算上要比LESS更專(zhuān)業(yè)，他可以直接換算單位了。Sass可以處理無(wú)法識(shí)別的度量單位，并將其輸出。這個(gè)特性很明顯是一個(gè)對(duì)未來(lái)的嘗試——證明W3C作出的一些改變。
Stylus的運(yùn)算是三款預(yù)處理器語(yǔ)言中最強(qiáng)大的一款，他擁有其他程序語(yǔ)言一樣的運(yùn)算功能，簡(jiǎn)單點(diǎn)的加減乘除，復(fù)雜的有關(guān)系運(yùn)算、邏輯運(yùn)算等。受限于篇幅，感興趣的同學(xué)可以到官網(wǎng)上仔細(xì)閱讀。
7.顏色函數(shù)
顏色函數(shù)是CSS預(yù)處理器語(yǔ)言中內(nèi)置的顏色函數(shù)功能，這些功能可以對(duì)顏色進(jìn)行處理，例如顏色的變亮、變暗、飽和度控制、色相控制，漸變顏色等處理十分的方便。
a)Sass顏色函數(shù)
lighten($color, 10%); /* 返回的顏色在$color基礎(chǔ)上變亮10% */ darken($color, 10%); /* 返回的顏色在$color基礎(chǔ)上變暗10% */ saturate($color, 10%); /* 返回的顏色在$color基礎(chǔ)上飽和度增加10% */ desaturate($color, 10%); /* 返回的顏色在$color基礎(chǔ)上飽和度減少10% */ grayscale($color); /* 返回$color的灰度色*/ complement($color); /* 返回$color的補(bǔ)色 */ invert($color); /* 返回$color的反相色 */ mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/
這只是Sass中顏色函數(shù)的一個(gè)簡(jiǎn)單列表，更多詳細(xì)的介紹可以閱讀Sass文檔。
顏色函數(shù)可以運(yùn)用到任何一個(gè)元素上，只要其有顏色的屬性，下面是一個(gè)簡(jiǎn)單的例子：
$color: #0982C1;
h2 {
background: $color;
border: 3px solid darken($color, 50%);/*邊框顏色在$color的基礎(chǔ)上變暗50%*/
}b)LESS顏色函數(shù)
lighten(@color, 10%); /* 返回的顏色在@color基礎(chǔ)上變亮10% */ darken(@color, 10%); /* 返回的顏色在@color基礎(chǔ)上變暗10%*/ saturate(@color, 10%); /* 返回的顏色在@color基礎(chǔ)上飽和度增加10% */ desaturate(@color, 10%); /* 返回的顏色在@color基礎(chǔ)上飽和度降低10%*/ spin(@color, 10); /* 返回的顏色在@color基礎(chǔ)上色調(diào)增加10 */ spin(@color, -10); /* 返回的顏色在@color基礎(chǔ)上色調(diào)減少10 */ mix(@color1, @color2); /* 返回的顏色是@color1和@color2兩者的混合色 */
LESS的完整顏色函數(shù)功能，請(qǐng)閱讀LESS文檔。
下面是LESS中如何使用一個(gè)顏色函數(shù)的簡(jiǎn)單例子：
@color: #0982C1;
h2 {
background: @color;
border: 3px solid darken(@color, 50%);
}c)Stylus的顏色函數(shù)
lighten(color, 10%); /* 返回的顏色在'color'基礎(chǔ)上變亮10% */ darken(color, 10%); /* 返回的顏色在'color'基礎(chǔ)上變暗10% */ saturate(color, 10%); /* 返回的顏色在'color'基礎(chǔ)上飽和度增加10% */ desaturate(color, 10%); /* 返回的顏色在'color'基礎(chǔ)上飽和度降低10% */
有關(guān)于Stylus的顏色函數(shù)介紹，請(qǐng)閱讀Stylus文檔。
下面是Stylus顏色函數(shù)的一個(gè)簡(jiǎn)單實(shí)例：
color = #0982C1 h2 background color border 3px solid darken(color, 50%)
從上面展示的部分顏色函數(shù)可以告訴我們，Sass、LESS和Stylus都具有強(qiáng)大的顏色函數(shù)功能，功能特性上都大同小異，只是在使用方法上略有不同。而且他們都具有相同的一個(gè)目的，就是方便操作樣式中的顏色值。
8.導(dǎo)入（Import）
在CSS中，并不喜歡用@import來(lái)導(dǎo)入樣式，因?yàn)檫@樣的做法會(huì)增加http的請(qǐng)求。但是在CSS預(yù)處理器中的導(dǎo)入(@import)規(guī)則和CSS的有所不同，它只是在語(yǔ)義上導(dǎo)入不同的文件，但最終結(jié)果是生成一個(gè)CSS文件。如果你是通赤“@import ‘file.css’”導(dǎo)入“file.css”樣式文件，那效果跟普通CSS導(dǎo)入樣式文件一樣。注意：導(dǎo)入文件中定義了變量、混合等信息也將會(huì)被引入到主樣式文件中，因此需要避免他們的相互沖突。
Sass、LESS和Stylus三款CSS預(yù)處理器語(yǔ)言，導(dǎo)入樣式的方法都是一樣：
被導(dǎo)入文件的樣式：
/* file.{type} */
body {
background: #EEE;
}需要導(dǎo)入樣式的文件：
@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}轉(zhuǎn)譯出來(lái)的CSS代碼：
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}9.注釋?zhuān)–omment）
CSS預(yù)處理器語(yǔ)言中的注釋是比較基礎(chǔ)的一部分，這三款預(yù)處理器語(yǔ)言除了具有標(biāo)準(zhǔn)的CSS注釋之外，還具有單行注釋?zhuān)徊贿^(guò)單行注釋不會(huì)被轉(zhuǎn)譯出來(lái)。
a)Sass、LESS和Stylus的多行注釋
多行注釋和CSS的標(biāo)準(zhǔn)注釋?zhuān)麄兛梢暂敵龅紺SS樣式中，但在Stylus轉(zhuǎn)譯時(shí)，只有在“compress”選項(xiàng)未啟用的時(shí)候才會(huì)被輸出來(lái)。
/* *我是注釋 */ body padding 5px
b)Sass、LESS和Stylus的單行注釋
單行注釋跟JavaScript語(yǔ)言中的注釋一樣，使用雙斜杠（//），但單行注釋不會(huì)輸出到CSS中。
//我是注釋 @mainColor：#369;//定義主體顏色
在Stylus中除了以上兩種注釋之外，他還有一種注釋?zhuān)凶鞫嘈芯彌_注釋。這種注釋跟多行注釋類(lèi)似，不同之處在于始的時(shí)候，這里是”/*！”。這個(gè)相當(dāng)于告訴Stylus壓縮的時(shí)候這段無(wú)視直接輸出。
/*! *給定數(shù)值合體 */ add(a, b) a + b
上面從九個(gè)常用的特性對(duì)Sass、LESS和Stylus三款CSS預(yù)處理器語(yǔ)言的使用做了對(duì)比，在某些特性上可以說(shuō)是一模一樣，而有一些特性上功能其實(shí)一樣，只是在部分書(shū)寫(xiě)規(guī)則上有所不同。當(dāng)然有些特性是完全不同。在這里幾是從使用方法上做為一個(gè)比較，主要目的是讓大家經(jīng)過(guò)對(duì)比之后，使自己選擇哪一款CSS預(yù)處理器語(yǔ)言有所方向和幫助。
以上是“css預(yù)處理器指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
