sass/scss 和 less的區別

孤舟蓑翁發表於2016-05-07
CSS

一. 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。

相關文章