CSS預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行Web頁(yè)面樣式設(shè)計(jì)塔橡，然后再編譯成正常的CSS文件匆笤，以供項(xiàng)目使用；
讓你的CSS更加簡(jiǎn)潔谱邪、適應(yīng)性更強(qiáng)、可讀性更佳庶诡，更易于代碼的維護(hù)等諸多好處惦银。
當(dāng)前主流的三種預(yù)編譯器
- less
- sass
- stylus
比較一:基本語(yǔ)法的區(qū)別
首先 Sass 和 Less 都使用的是標(biāo)準(zhǔn)的 CSS 語(yǔ)法，因此如果可以很方便的將已有的 CSS 代碼轉(zhuǎn)為預(yù)處理器代碼末誓，默認(rèn) Sass 使用 .sass 擴(kuò)展名扯俱，而 Less 使用 .less 擴(kuò)展名。
/* style.scss or style.less */
h1 {
color: #666666;
但是喇澡，不過(guò) Sass 同時(shí)也支持老的語(yǔ)法迅栅，就是不包含花括號(hào)和分號(hào)的方式：
/* style.sass */
h1
color: #666666;
而 Stylus 支持的語(yǔ)法要更多樣性一點(diǎn)，它默認(rèn)使用 .styl 的文件擴(kuò)展名晴玖，它可以既沒(méi)有花括號(hào)也沒(méi)用冒號(hào)读存。下面是 Stylus 支持的語(yǔ)法：
/* style.styl */
h1 {
color: #666666;
}
/* omit brackets */
h1
color: #666666;
/* omit colons and semi-colons */
h1
color: #666666
可以在同一個(gè)樣式單中使用不同的變量，例如下面的寫(xiě)法也不會(huì)報(bào)錯(cuò)：
h1 {
color #0982c1
}
h2
font-size: 1.2em
比較二:變量
Sass聲明變量必須是『$』開(kāi)頭呕屎，后面緊跟變量名和變量值让簿，而且變量名和變量值需要使用冒號(hào)：分隔開(kāi)。
Less 聲明變量用『@』開(kāi)頭秀睛，其余等同 Sass尔当。
Stylus 中聲明變量沒(méi)有任何限定，結(jié)尾的分號(hào)可有可無(wú)蹂安，但變量名和變量值之間必須要有『等號(hào)』
Sass
Sass讓人們受益的一個(gè)重要特性就是它為css引入了變量椭迎。你可以把反復(fù)使用的css屬性值 定義成變量锐帜，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書(shū)寫(xiě)這一屬性值畜号。
$maincolor : #666666;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
color: $maincolor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
Less
在less文件中缴阎，當(dāng)一個(gè)值需要反復(fù)使用時(shí)，可以通過(guò)@符號(hào)定義變量弄兜。已經(jīng)被賦值的變量以及其他的常量（如像素药蜻、顏色等）都可以參與運(yùn)算。
@maincolor : #666666;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
color: @maincolor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
sass和less用法極其類(lèi)似替饿，saas用
$,less用@.
Stylus
stylus對(duì)變量是沒(méi)有任何設(shè)定的语泽，可以是以$開(kāi)頭，或者任何的字符视卢，而且與變量之間可以用冒號(hào)踱卵，空格隔開(kāi)，
但是在stylus中不能用@開(kāi)頭据过，例如：
maincolor = #092873
siteWidth = 1024px
borderStyle = dotted
body
color maincolor
border 1px borderStyle mainColor
max-width siteWidth
以上三種寫(xiě)法等同于:
body {
color: #092873;
border: 1px dotted #092873;
max-width: 1024px;
}
比較三:嵌套
如下代碼惋砂，大家肯定經(jīng)常用到或者很常見(jiàn)
div {
margin: 10px;
}
div nav {
height: 25px;
}
div nav a {
color: #ffffff;
}
div nav a:hover {
text-decoration: underline;
}
如果用 CSS 預(yù)處理器，就可以少寫(xiě)很多單詞绳锅，而且父子節(jié)點(diǎn)關(guān)系一目了然西饵，并且sass，Less鳞芙，stylus都支持下面這樣的寫(xiě)法眷柔，且都是相同的：
nav {
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
比較四:運(yùn)算符
在 CSS 預(yù)處理器中還是可以進(jìn)行樣式的計(jì)算如下：
body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}
比較五:運(yùn)算符
CSS 預(yù)處理器一般都會(huì)內(nèi)置一些顏色處理函數(shù)用來(lái)對(duì)顏色值進(jìn)行處理，例如加亮原朝、變暗驯嘱、顏色梯度等
1.sass的顏色處理函數(shù)：
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
desaturate($color, 10%);
grayscale($color);
complement($color);
invert($color);
mix($color1, $color2, 50%);
實(shí)例如下：
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
2.less的顏色處理函數(shù)：
用@,其余同sass
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
3.Stylus顏色處理函數(shù)：
lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);
實(shí)例如下：
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
比較六:繼承
1.sass：
sass可通過(guò)@extend來(lái)實(shí)現(xiàn)代碼組合聲明，使代碼更加優(yōu)越簡(jiǎn)潔喳坠。
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
2.Less css：
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
.message;
border-color: green;
}
.error {
.message;
border-color: red;
}
.warning {
.message;
border-color: yellow;
}
以上兩種寫(xiě)法等同于：
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
比較七:Mixins（混入）
Mixins 有點(diǎn)像是函數(shù)或者是宏鞠评，當(dāng)某段 CSS 經(jīng)常需要在多個(gè)元素中使用時(shí)，可以為這些共用的 CSS 定義一個(gè) Mixin壕鹉，然后只需要在需要引用這些 CSS 地方調(diào)用該 Mixin 即可剃幌。
可以理解成，定義了一個(gè)公用的方法晾浴，傳入不同的參數(shù)去調(diào)用這個(gè)方法锥忿。
1.sass
// logo 高度
@value logoHeight: 160px;
// logo的樣式 logo（$x:2px）,也可以有默認(rèn)參數(shù)
@mixin logo($x, $y, $width, $height, $logoHeight) {
display: inline-flex;
height: $logoHeight;
width: 100%;
justify-content: center;
align-items: flex-end;
background: url('../assets/basic/logo.png') no-repeat;
background-position: $x $y;
background-size: $width $height;
color: #fff;
font-size: 22px;
font-weight: 600;
transition: background 0.2s, width 0.2s, height 0.2s;
}
// 在引用的地方@include logo（）
.logo {
@include logo(19px, 22px, 120px, 120px, logoHeight);
}
2.less
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); //這里調(diào)用默認(rèn) border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); //這里調(diào)用 border:5px solid #F00;
}
3.Stylus
與less的區(qū)別是，引用的時(shí)候怠肋，可以不用加 (點(diǎn) .)
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
比較八:3D文本
要生成具有 3D 效果的文本可以使用 text-shadows 敬鬓，唯一的問(wèn)題就是當(dāng)要修改顏色的時(shí)候就非常的麻煩，而通過(guò) mixin 和顏色函數(shù)可以很輕松的實(shí)現(xiàn)：
用法跟mixin的用法一致
1.sass
@mixin text3d($color) {
color: $color;
text-shadow: 1px 1px 0px darken($color, 5%),
2px 2px 0px darken($color, 10%),
3px 3px 0px darken($color, 15%),
4px 4px 0px darken($color, 20%),
4px 4px 2px #000;
}
h1 {
font-size: 32pt;
@ include text3d(#0982c1);
}
2.less css
.text3d(@color) {
color: @color;
text-shadow: 1px 1px 0px darken(@color, 5%),
2px 2px 0px darken(@color, 10%),
3px 3px 0px darken(@color, 15%),
4px 4px 0px darken(@color, 20%),
4px 4px 2px #000;
}
span {
font-size: 32pt;
.text3d(#0982c1);
}
3.stylus
text3d(color)
color: color
text-shadow: 1px 1px 0px darken(color, 5%),
2px 2px 0px darken(color, 10%),
3px 3px 0px darken(color, 15%),
4px 4px 0px darken(color, 20%),
4px 4px 2px #000
span
font-size: 32pt
text3d(#0982c1)
其生成的css最終的效果如下：
span {
font-size: 32pt;
color: #0982c1;
text-shadow: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
}
比較九:3D文本
在sass中，還支持條件語(yǔ)句：
@if可一個(gè)條件單獨(dú)使用钉答，也可以和@else結(jié)合多條件使用
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
其最終的css代碼如下：
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
其他：sass還支持for础芍，each等其他用法，自己上官網(wǎng)see数尿，see吧仑性。
鏈接??：
sass：https://www.sass.hk/
lesscss：http://lesscss.cn/
stylus:http://stylus-lang.com/
