一、是什么
Css 作為一門(mén)標(biāo)記性語(yǔ)言，語(yǔ)法相對(duì)簡(jiǎn)單，對(duì)使用者的要求較低，但同時(shí)也帶來(lái)一些問(wèn)題
需要書(shū)寫(xiě)大量看似沒(méi)有邏輯的代碼，不方便維護(hù)及擴(kuò)展，不利于復(fù)用，尤其對(duì)于非前端開(kāi)發(fā)工程師來(lái)講，往往會(huì)因?yàn)槿鄙?Css 編寫(xiě)經(jīng)驗(yàn)而很難寫(xiě)出組織良好且易于維護(hù)的 Css 代碼
Css 預(yù)處理器便是針對(duì)上述問(wèn)題的解決方案
預(yù)處理語(yǔ)言
擴(kuò)充了 Css 語(yǔ)言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 Css 更易維護(hù)、方便
本質(zhì)上，預(yù)處理是 Css 的超集
包含一套自定義的語(yǔ)法及一個(gè)解析器，根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的 Css 文件
二、有哪些
Css 預(yù)編譯語(yǔ)言在前端里面有三大優(yōu)秀的預(yù)編處理器，分別是：
sass
2007 年誕生，最早也是最成熟的 Css 預(yù)處理器，擁有 Ruby 社區(qū)的支持和 Compass 這一最強(qiáng)大的 Css 框架，目前受 LESS 影響，已經(jīng)進(jìn)化到了全面兼容 Css 的 Scss
文件后綴名為 .sass 與 scss ，可以嚴(yán)格按照 sass 的縮進(jìn)方式省去大括號(hào)和分號(hào)
less
2009年出現(xiàn)，受 SASS 的影響較大，但又使用 Css 的語(yǔ)法，讓大部分開(kāi)發(fā)者和設(shè)計(jì)師更容易上手，在 Ruby 社區(qū)之外支持者遠(yuǎn)超過(guò) SASS
其缺點(diǎn)是比起 SASS 來(lái)，可編程功能不夠，不過(guò)優(yōu)點(diǎn)是簡(jiǎn)單和兼容 Css ，反過(guò)來(lái)也影響了 SASS 演變到了 Scss 的時(shí)代
stylus
Stylus 是一個(gè) Css 的預(yù)處理框架，2010 年產(chǎn)生，來(lái)自 Node.js 社區(qū)，主要用來(lái)給 Node 項(xiàng)目進(jìn)行 Css 預(yù)處理支持
所以 Stylus 是一種新型語(yǔ)言，可以創(chuàng)建健壯的、動(dòng)態(tài)的、富有表現(xiàn)力的 Css 。比較年輕，其本質(zhì)上做的事情與 SASS/LESS 等類似
三、區(qū)別
雖然各種預(yù)處理器功能強(qiáng)大，但使用最多的，還是以下特性：
- 變量（variables）
- 作用域（scope）
- 代碼混合（ mixins）
- 嵌套（nested rules）
- 代碼模塊化（Modules）
因此，下面就展開(kāi)這些方面的區(qū)別
基本使用
less和scss
sass
stylus
嵌套
三者的嵌套語(yǔ)法都是一致的，甚至連引用父級(jí)選擇器的標(biāo)記 & 也相同
區(qū)別只是 Sass 和 Stylus 可以用沒(méi)有大括號(hào)的方式書(shū)寫(xiě)
less
.a {
&.b {
color: red;
}
}
變量
變量無(wú)疑為 Css 增加了一種有效的復(fù)用方式，減少了原來(lái)在 Css 中無(wú)法避免的重復(fù)「硬編碼」
less 聲明的變量必須以 @ 開(kāi)頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號(hào) : 分隔開(kāi)
@red: #c00;
sass 聲明的變量跟 less 十分的相似，只是變量名前面使用 @ 開(kāi)頭
$red: #c00;
stylus 聲明的變量沒(méi)有任何的限定，可以使用 $ 開(kāi)頭，結(jié)尾的分號(hào) ; 可有可無(wú)，但變量與變量值之間需要使用 =
在 stylus 中我們不建議使用 @ 符號(hào)開(kāi)頭聲明變量
red = #c00
作用域
Css 預(yù)編譯器把變量賦予作用域，也就是存在生命周期。就像 js 一樣，它會(huì)先從局部作用域查找變量，依次向上級(jí)作用域查找
sass 中不存在全局變量
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
編譯后
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色（無(wú)全局變量概念）*/
}
所以，在 sass 中最好不要定義相同的變量名
less 與 stylus 的作用域跟 javascript 十分的相似，首先會(huì)查找局部定義的變量，如果沒(méi)有找到，會(huì)像冒泡一樣，一級(jí)一級(jí)往下查找，直到根為止
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
編譯后：
.scoped {
color:white;/*白色（調(diào)用了局部變量）*/
background-color:blue;
}
.unscoped {
color:black;/*黑色（調(diào)用了全局變量）*/
}
混入
混入（mixin）應(yīng)該說(shuō)是預(yù)處理器最精髓的功能之一了，簡(jiǎn)單點(diǎn)來(lái)說(shuō)， Mixins 可以將一部分樣式抽出，作為單獨(dú)定義的模塊，被很多選擇器重復(fù)使用
可以在 Mixins 中定義變量或者默認(rèn)參數(shù)
在 less 中，混合的用法是指將定義好的 ClassA 中引入另一個(gè)已經(jīng)定義的 Class ，也能夠傳遞參數(shù)，參數(shù)變量為 @ 聲明
.alert {
font-weight: 700;
}
.highlight(@color: red) {
font-size: 1.2em;
color: @color;
}
.heads-up {
.alert;
.highlight(red);
}
編譯后
.alert {
font-weight: 700;
}
.heads-up {
font-weight: 700;
font-size: 1.2em;
color: red;
}
Sass 聲明 mixins 時(shí)需要使用 @mixinn ，后面緊跟 mixin 的名，也可以設(shè)置參數(shù)，參數(shù)名為變量 $ 聲明的形式
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
stylus 中的混合和前兩款 Css 預(yù)處理器語(yǔ)言的混合略有不同，他可以不使用任何符號(hào)，就是直接聲明 Mixins 名，然后在定義參數(shù)和默認(rèn)值之間用等號(hào)（=）來(lái)連接
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 調(diào)用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 調(diào)用error mixins，并將參數(shù)$borderWidth的值指定為5px */
}
代碼模塊化
模塊化就是將 Css 代碼分成一個(gè)個(gè)模塊
scss 、 less 、 stylus 三者的使用方法都如下所示
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
參考文獻(xiàn)
https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA
到此這篇關(guān)于Css預(yù)編語(yǔ)言及區(qū)別詳解的文章就介紹到這了,更多相關(guān)Css預(yù)編語(yǔ)言內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
