预处理器Less和Sass
什么是CSS預(yù)處理器
使用一種專門的編程語言，對web樣式進(jìn)行編碼，然后再編譯成正常的css文件，他對css進(jìn)行擴展，比css多出來很多功能，比如變量、嵌套、混合、繼承等。
less語法
（1）變量
less允許開發(fā)者自定義變量，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡單。
@color: #4D926F; #header { color: @color; } h2 { color: @color; }（2）Mixins（混入）代碼復(fù)用
很多動態(tài)語言都支持Mixins特性，它是多重繼承的一種實現(xiàn)，在less中，混入是指在一個class中引入另外一個已經(jīng)定義的class，就像在當(dāng)前class中增加一個屬性一樣。
less文件
//定義一個樣式選擇器 .roundCorners(@radius:5px){-moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } //在另外的樣式選擇器中使用 #header{.roundCorners; } #footer{.roundCorners(10px); }經(jīng)過編譯生成的css文件
#header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }Mixins其實是一種嵌套，它允許將一個類嵌套到另外一個類中使用，被嵌套的類也可以稱作變量。
（3）嵌套規(guī)則
#home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } }less的嵌套規(guī)則的寫法是與DOM結(jié)構(gòu)相對應(yīng)的，這樣使我們的樣式表書寫更加簡潔和更好的可讀性，同時，嵌套規(guī)則使得對偽元素的操作更加方便。
a { color: red; text-decoration: none; &:hover {// 有 & 時解析的是同一個元素或此元素的偽類，沒有 & 解析是后代元素 color: black; text-decoration: underline; } }?
Less和Sass兩者都屬于css的預(yù)處理器，功能上大同小異，都是使用類似程序式語言的方式書寫CSS，都具有變量、混入、嵌套、繼承等特性，最終目的都是方便CSS的書寫和維護(hù)。
區(qū)別：
（1）實現(xiàn)方式不同，less是基于js運行，所以less是在客戶端處理；sass是基于Ruby的，在服務(wù)器端處理。很多開發(fā)者不選擇less是因為less輸出修改過的css到瀏覽器需要依賴js引擎，而js引擎需要額外的時間來處理。
（2）變量。less是以@開頭定義的變量，如@mainColor:#339;而sass是以$開頭定義的變量。
（3）sass支持條件語句，可以使用if{}、else{}、for{}循環(huán)等，而less不支持。
轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/11404283.html
總結(jié)
以上是生活随笔為你收集整理的预处理器Less和Sass的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
