變量
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,可能它不會像現在這樣被廣泛應用