標籤:bsp simple 簡潔 預設 文法 壓縮 開頭 style bootstra
一. Sass/Scss、Less是什麼?
Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言,Sass文法屬於縮排文法,比css比多出好些功能(如變數、嵌套、運算,混入(Mixin)、繼承、顏色處理,函數等),更容易閱讀。
Sass與Scss是什麼關係?
Sass的縮排文法,對於寫慣css前端的web開發人員來說很不直觀,也不能將css代碼加入到Sass裡面,因此sass文法進行了改良,Sass 3就變成了Scss(sassy css)。與原來的文法相容,只是用{}取代了原來的縮排。
Less也是一種動態樣式語言. 對CSS賦予了動態語言的特性,如變數,繼承,運算, 函數. Less 既可以在用戶端上運行 (支援IE 6+, Webkit, Firefox),也可在服務端運行 (藉助 Node.js)。
二. Sass/Scss與Less區別1.編譯環境不一樣
Sass的安裝需要Ruby環境,是在服務端處理的,而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器,也可以在開發環節使用Less,然後編譯成css檔案,直接放到項目中,也有 Less.app、SimpleLess、CodeKit.app這樣的工具,也有線上編譯地址。
2.變數符不一樣,Less是@,而Scss是$,而且變數的範圍也不一樣。
Less-範圍@color: #00c; /* 藍色 */#header { @color: #c00; /* red */ border: 1px solid @color; /* 紅色邊框 */}#footer { border: 1px solid @color; /* 藍色邊框 */}Less-範圍編譯後#header{border:1px solid #cc0000;}#footer{border:1px solid #0000cc;}scss-範圍$color: #00c; /* 藍色 */#header { $color: #c00; /* red */ border: 1px solid $color; /* 紅色邊框 */}#footer { border: 1px solid $color; /* 藍色邊框 */}Sass-範圍編譯後#header{border:1px solid #c00}#footer{border:1px solid #c00}我們可以看出來,less和scss中的變數會隨著範圍的變化而不一樣。
3.輸出設定,Less沒有輸出設定,Sass提供4中輸出選項:nested, compact, compressed 和 expanded。
輸出樣式的風格可以有四種選擇,預設為nested
- nested:嵌套縮排的css代碼
- expanded:展開的多行css代碼
- compact:簡潔格式的css代碼
- compressed:壓縮後的css代碼
4.Sass支援條件陳述式,可以使用if{}else{},for{}迴圈等等。而Less不支援。
/* Sample Sass “if” statement */@if lightness($color) > 30% {} @else {}/* Sample Sass “for” loop */@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; }}
5. 引用外部CSS檔案
scss引用的外部檔案命名必須以_開頭, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss檔案分別設定的h1 h2 h3。檔案名稱如果以底線_開頭的話,Sass會認為該檔案是一個引用檔案,不會將其編譯為css檔案.
// 原始碼:@import "_test1.scss";@import "_test2.scss";@import "_test3.scss";// 編譯後:h1 { font-size: 17px;} h2 { font-size: 17px;} h3 { font-size: 17px;}
Less引用外部檔案和css中的@import沒什麼差異。
6.Sass和Less的工具庫不同
Sass有工具庫Compass, 簡單說,Sass和Compass的關係有點像Javascript和jQuery的關係,Compass是Sass的工具庫。在它的基礎上,封裝了一系列有用的模組和模板,補充強化了Sass的功能。
Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫,Bootstrap的樣式檔案部分源碼就是採用Less文法編寫。
三. 總結
不管是Sass,還是Less,都可以視為一種基於CSS之上的進階語言,其目的是使得CSS開發更靈活和更強大,Sass的功能比Less強大,基本可以說是一種真正的程式設計語言了,Less則相對清晰明了,易於上手,對編譯環境要求比較寬鬆。考慮到編譯Sass要安裝Ruby,而Ruby官網在國內訪問不了,個人在實際開發中更傾向於選擇Less。
sass/scss 和 less的區別