sass和less地出現(xiàn)大大的提升了代碼的復(fù)用性,按常理來(lái)說(shuō)它們也是css,被稱為CSS擴(kuò)展語(yǔ)言(簡(jiǎn)稱強(qiáng)化版的css),理論來(lái)說(shuō)sass也需要編譯成為css才能在瀏覽器上面運(yùn)行的。那么為什么會(huì)出現(xiàn)sass和less呢?開(kāi)發(fā)者應(yīng)該選擇哪一個(gè)預(yù)處理語(yǔ)言來(lái)開(kāi)發(fā)呢?
編譯語(yǔ)言讓開(kāi)發(fā)變得更加高效
眾所周知,css的誕生就是為了作為網(wǎng)站的樣式所用(你可以試試把一些網(wǎng)站的css去掉,就能看到網(wǎng)站的用戶體驗(yàn)感基本為0),其實(shí)原理都差不多,saas和less無(wú)非就是在css上面加入了變量等,它能讓你的前端開(kāi)發(fā)工作更加的輕松。
為什么要選擇saas和less預(yù)處理語(yǔ)言?
css面臨的下面的幾個(gè)問(wèn)題:
- 語(yǔ)法不夠強(qiáng)大,比如無(wú)法嵌套書(shū)寫(xiě),導(dǎo)致模塊化開(kāi)發(fā)中需要書(shū)寫(xiě)很多重復(fù)的選擇器;
- 沒(méi)有變量和合理的樣式復(fù)用機(jī)制,使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出,導(dǎo)致難以維護(hù)。
saas和less之間的區(qū)別
一:編譯方式不同:less和sass都是css的拓展語(yǔ)言,最主要的區(qū)別是less是通過(guò)JAVAscript編譯,而sass是通過(guò)ruby編譯的,如果沒(méi)有引入前端工程化,less會(huì)消耗客戶端性能,sass會(huì)消耗服務(wù)端性能,但是引入前端工程化的話,gunt,gulp,webpack等,less和sass在打包階段都會(huì)轉(zhuǎn)化成css,所以不會(huì)有區(qū)別,只是sass是基于ruby,所以每次npm的時(shí)候相對(duì)慢一點(diǎn)點(diǎn)。
二:定義變量時(shí)候不同:less的定義變量是用@,而sass則用跟php一樣的定義方式$。
三:混合模式的不同:Less中使用混合時(shí),只需在classB中根據(jù)classA的命名來(lái)是用;Sass中首先在定義混合時(shí)需要使用@mixin命令,其次在調(diào)用時(shí)需要使用@include命令來(lái)引入之前定義的混合。
四:語(yǔ)法使用上的不同:比如變量的作用域等。
新手建議用less,有經(jīng)驗(yàn)的程序員用saas開(kāi)發(fā)
Sass有很多可用的方法和邏輯。例如:條件和循環(huán)語(yǔ)句。LESS也可以做到,但不是很高效且不直觀。像LESS一樣,Sass也內(nèi)置了一些非常友好的函數(shù),像顏色,數(shù)字,還有變量列表。
Sass用戶可以使用功能強(qiáng)大的Compass庫(kù)。這些庫(kù)LESS用戶也可以用,但并不完全一樣,因?yàn)檫@是由一個(gè)龐大的社區(qū)來(lái)共同維護(hù)的。Compass有非常強(qiáng)大的特性,像自動(dòng)生成圖片切片(CSS Sprites),傳統(tǒng)瀏覽器支持,還有對(duì)CSS3的跨瀏覽器支持等。
Compass同樣允許你使用外部框架像Blueprint, Foundation 或 Bootstrap。這也意味著你可以非常容易地使用你喜歡的框架而不需要掌握各種不同的工具。
預(yù)處理語(yǔ)言也不是萬(wàn)能的,因?yàn)閏ss是直接寫(xiě)完可以在瀏覽器可以解析的,但是例如saas就需要編譯完之后才能運(yùn)行的,如果并非大型的網(wǎng)站項(xiàng)目開(kāi)發(fā)的話,我覺(jué)得沒(méi)必要用saas等預(yù)處理語(yǔ)言。