less、sass、styus三者的區別

變量
Sass聲明變量必須是【$】開頭,後面緊跟變量名和變量值,而且變量名和變量值需要使用冒號:分隔開。
Less聲明變量用【@】開頭,其餘等同Sass。
Stylus中聲明變量沒有任何限定,結尾的分號可有可無,但變量名和變量值之間必須要有【=】。

作用域
Sass:三者最差,不存在全局變量的概念
Less:最近的一次更新的變量有效,並且會作用於全部的引用!
Stylus:Sass的處理方式和Stylus相同,變量值輸出時根據之前最近的一次定義計算,每次引用最近的定義有效

嵌套
三種css預編譯器的【選擇器嵌套】在使用上來說沒有任何區別,甚至連引用父級選擇器的標記&也相同

繼承
Sass和Stylus的繼承非常像,能把一個選擇器的所有樣式繼承到另一個選擇器上。使用【@extend】開始,後面接被繼承的選擇器。Stylus的繼承方式來自Sass,兩者如出一轍。Less則又獨樹一幟地用僞類來描述繼承關係

導入@import
Sass中只能在使用url()表達式引入時進行變量插值

$device:mobile;
@import url(styles.#{$device}.css);

Less中可以在字符串中進行插值

@device:mobile;
@import "styles.@{device}.css";

Stylus中在這裏插值不管用,但是可以利用其字符串拼接的功能實現

device = "mobile"
@import "styles." + device +.css”

總結
Sass和Less語法嚴謹、stylus相對自由。因爲Less長的更像css,所以它可能學習起來更容易。
Sass和Compass、Stylus和Nib都是好基友。
Sass和Stylus都具有類語言的邏輯方式處理:條件、循環等,而Less需要通過When等關鍵詞模擬這些功能,這方面Less比不上Sass和Stylus
Less在豐富性以及特色上都不及Sass和Stylus,若不是因爲Bootstrap引入了Less,可能它不會像現在這樣被廣泛應用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章