這篇文章是初步介紹css預(yù)處理的，詳細(xì)學(xué)習(xí)請(qǐng)移步官網(wǎng)~

sass中文文檔：https://www.sass.hk/docs

less中文文檔：http://lesscss.cn/

什么是css預(yù)處理器

CSS 預(yù)處理器是一種語(yǔ)言。

用通俗易懂的話(huà)來(lái)說(shuō)就是“用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式編寫(xiě)，再通過(guò)編譯器轉(zhuǎn)化為正常的 CSS 文件”，無(wú)需考慮瀏覽器的兼容性問(wèn)題。

可以在 CSS 中使用變量、簡(jiǎn)單的程序邏輯、函數(shù)等等，可以讓你的 CSS 更加簡(jiǎn)潔，適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處。

?

但CSS預(yù)處理器也不是萬(wàn)金油，原生CSS的好處在于簡(jiǎn)便、隨時(shí)隨地被使用和調(diào)試。

使用預(yù)處理器的話(huà)有預(yù)編譯CSS步驟的加入，讓我們開(kāi)發(fā)工作流中多了一個(gè)環(huán)節(jié)，調(diào)試也變得更麻煩了。更大的問(wèn)題在于，預(yù)編譯很容易造成后代選擇器的濫用。

所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來(lái)的額外維護(hù)開(kāi)銷(xiāo)，CSS預(yù)處理器有沒(méi)有解決更大的麻煩。

Less和Sass

以下概念以sass為例講解，less中一樣的。

變量：

$width: 5em; //直接使用即調(diào)用變量： #main {width: $width; }

編譯為：

#main {width: 5em; }

混合（Mixins）：定義好一個(gè)基本樣式，在需要的選擇器中引用。

//定義要引用的樣式： @mixin指令后添加名稱(chēng)與樣式 @mixin large-text {color: #ff0000; } //引用混合樣式：@include 指令后添加名稱(chēng) .page-title {@include large-text;padding: 4px;margin-top: 10px; }

上面代碼編譯為：

.page-title {color: #ff0000;padding: 4px;margin-top: 10px; }

參數(shù)混合（Parametric）：

帶參數(shù)的混合，像函數(shù)一樣定義一個(gè)參數(shù)的默認(rèn)值、或者參數(shù)屬性集合

@mixin sexy-border($color, $width) {//參數(shù)：$color, $widthborder: {color: $color;width: $width;style: dashed;} } p { @include sexy-border(blue, 1in); }

編譯為：

p {border-color: blue;border-width: 1in;border-style: dashed; }

嵌套規(guī)則（Nested Rules）：

將一套 CSS 樣式嵌套進(jìn)另一套樣式中，內(nèi)層的樣式將它外層的選擇器作為父選擇器。避免了重復(fù)輸入父選擇器

#main p {//父選擇器color: #00ff00;width: 97%;.redbox {//子選擇器background-color: #ff0000;color: #000000;} }

編譯為：

#main p {color: #00ff00;width: 97%;
}
#main p .redbox {background-color: #ff0000;color: #000000;
}

運(yùn)算（Operations）：在CSS中使用加、減、乘、除進(jìn)行數(shù)學(xué)運(yùn)算，主要運(yùn)用于屬性值和顏色的運(yùn)算，可以輕松實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。

p {$width: 1000px;width: $width/2; // Uses a variable, does divisionheight: (500px/2); // Uses parentheses, does divisionmargin-left: 5px + 8px/2px; // Uses +, does division }

編譯為:

p {width: 500px;height: 250px;margin-left: 9px;
}

顏色功能（Color function）：顏色的函數(shù)運(yùn)算，可以編輯你的顏色，顏色會(huì)先被轉(zhuǎn)化成HSL色彩空間，然后在通道級(jí)別操作。

命名空間（Namespaces）：樣式分組，即將一些變量或者混合模塊打包封裝，從而方便被調(diào)用，更好的組織CSS和屬性集的重復(fù)使用。

作用域（Scope）：局部修改樣式，先從本地查找變量或者混合模塊，如果沒(méi)有找到的話(huà)就會(huì)去父級(jí)作用域中查找，直到找到為止，這一點(diǎn)和其他程序語(yǔ)言的作域非常的相似。

JavaScript表達(dá)式(Javascript evaluation)：在CSS樣式中使用Javascript表達(dá)式賦值。

上面八條在LESS和Sass中是一個(gè)很重要的概念，只有把上面的概念理解清楚了，才能更好的學(xué)習(xí)LESS和Sass。

?

Less和Sass之間的主要區(qū)別是他們的實(shí)現(xiàn)方式不同：

　　LESS是基于JavaScript運(yùn)行,需要引入Less.js來(lái)處理代碼輸出css到瀏覽器，所以L(fǎng)ESS是在客戶(hù)端處理。

　　Sass是基于Ruby的，需要安裝Ruby環(huán)境，是在服務(wù)器端處理的。

?

很多開(kāi)發(fā)者不選擇LESS是因?yàn)長(zhǎng)ESS輸出修改過(guò)的CSS到瀏覽器需要依賴(lài)于Javascript引擎，而Javascript引擎需要額外的時(shí)間來(lái)處理代碼。

解決：

比如只在開(kāi)發(fā)環(huán)節(jié)使用LESS。開(kāi)發(fā)完成，復(fù)制粘貼LESS輸出的到一個(gè)壓縮器，然后到一個(gè)單獨(dú)的CSS文件來(lái)替代LESS文件。

另一種方式是使用LESS APP來(lái)編譯和壓縮你的LESS文件。

兩種方式都將是最小化你的樣式輸出，從而避免由于用戶(hù)的瀏覽器不支持Javascript而可能引起的任何問(wèn)題。盡管這不大可能，但終歸是有可能的。

?

Sass確實(shí)需要在Ruby上運(yùn)行,然而他不需要在服務(wù)器上編譯CSS。它也可以在本地編譯（正如前面提到的LESS）,編譯后的CSS可以運(yùn)用到你的項(xiàng)目上，Wordpress主題中，引擎模板，或者任何服務(wù)器，就像你的CSS文件。Mac也默認(rèn)提供了對(duì)Sass的安裝和支持，只需要一行命令就可以（sudo gem install sass）。

如果你安裝了Sass，你在本地就可以將Sass轉(zhuǎn)譯成CSS，并將轉(zhuǎn)譯的代碼用到你的項(xiàng)目中。如果你還不知道如何安裝Sass(或者Compass)，我們也寫(xiě)了一份詳細(xì)的指南Getting Started with Sass and Compass，可以很好的幫你清除這個(gè)障礙。

使用

首先 Sass 和 Less 都使用的是標(biāo)準(zhǔn)的 CSS 語(yǔ)法，因此你可以很方便的將已有的 CSS 代碼轉(zhuǎn)為預(yù)處理器代碼， Less 使用 .less 擴(kuò)展名

Sass 有兩種語(yǔ)法格式：

使用 “花括號(hào)” 表示屬性屬于某個(gè)選擇器，“分號(hào)” 分隔屬性，這種格式以 .scss 作為拓展名。

另一種簡(jiǎn)化格式：使用 “縮進(jìn)” 代替 “花括號(hào)” 表示屬性屬于某個(gè)選擇器，用 “換行” 代替 “分號(hào)” 分隔屬性，這種格式以 .sass 作為拓展名。

技巧收集

使用混合簡(jiǎn)化html的class數(shù)量，比如下面這個(gè)例子，本來(lái)寫(xiě).border和.post 兩個(gè)class，使用引用，就只寫(xiě).post。而且ul也可以共享這個(gè).border的樣式，減少重復(fù)代碼

.border {border-top: 1px dotted #333; }article.post {background: #eee;.border; }ul.menu {background: #ccc;.border; }

混合的另一種模式：選擇器繼承（less沒(méi)有），無(wú)需再使用逗號(hào)

.menu {border: 1px solid #ddd; } .footer {@extend .menu; } /* 上面的規(guī)則和下面的規(guī)則是一樣的效果 */ .menu, .footer {border: 1px solid #ddd; }

sass的混合寫(xiě)法

//定義
@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00; }
//使用
.generic-error {
? padding: 20px;
? margin: 4px;
? @ include error(); /* Applies styles from mixin error */
}

針對(duì)瀏覽器私有前綴的樣式，使用參數(shù)混合非常有用

.border-radius( @radius: 3px ) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius; }

div {
? .border-radius(10px);
}

使用運(yùn)算，在基礎(chǔ)樣式做數(shù)學(xué)運(yùn)算實(shí)現(xiàn)其他樣式。比如統(tǒng)計(jì)頁(yè)面的border寬度有哪幾種，然后定義個(gè)基礎(chǔ)的border變量，其余border在此基礎(chǔ)做運(yùn)算

@base_border_width: 2px; .error {
? border: @base_border_width*2 solid #F00;
? color: #F00;
}

使用嵌套規(guī)則，減少寫(xiě)父級(jí)元素名的代碼量或者減少選擇器層級(jí)。也可以組件實(shí)現(xiàn)對(duì)應(yīng)，方便管理。

//糟糕的多次寫(xiě)section section {margin: 10px; } section nav {height: 25px; } section nav a {color: #0982C1; } section nav a:hover {text-decoration: underline; }

使用嵌套后

section {margin: 10px;nav {height: 25px;a {color: #0982C1;&:hover {text-decoration: underline;}}} }

減少層級(jí)。下面的h2在原生的css中選擇器為：#site-body .post .post-header h2。下面這一整個(gè)可以是一個(gè)組件的樣式

#site-body { ….post { ….post-header { …h(huán)2 { … }a { …&:visited { … }&:hover { … }}}} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/yaoyao-sun/p/10393900.html

總結(jié)

以上是生活随笔為你收集整理的初识css预处理器：Sass、LESS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。