CSS 預處理器 SASS、LESS 介紹

什麼是 CSS 預處理器（CSS preprocessor）？

CSS 預處理器產生了一種新的語言，而核心理念是用一種專門的程式語言，為 CSS 增加一些程式設計的的特性，無需考慮瀏覽器的兼容性問題，例如可以在 CSS 中使用變量、簡單的邏輯程序、函數等等，讓開發者就只使用這種語言進行編碼工作。

簡單來說，CSS 預處理器用一種專門的程式語言，進行 Web 頁面樣式設計，然後再透過編譯轉為正常的 CSS 文件。

CSS 預處理器技術已經非常的成熟，而且也湧現出了越來越多的 CSS 預處理器語言，比如說：

SASS（SCSS）
LESS
Stylus
Turbine
Switch CSS
CSS Cacheer
DT CSS

為什麼要選擇 CSS 預處理器？

CSS 面臨的下面的幾個問題：

語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重複的選擇器
沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護

這些問題創造了 CSS 預處理器的生成，讓 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

既然有這麼多的預處理器語言，為什麼著重介紹 SASS、LESS ？原因很簡單，因為 Magento 2 使用 LESS 開發前端主題，官方也推薦 SASS 作為開發語言（如何安裝與使用可以參考我們之前的文章：使用Magento2 原生工具來將LESS編譯成CSS、以SASS開發Magento2佈景主題）。而這兩種預處理器語言適用性都很廣泛。沒有存在誰好誰壞的情況，只有存在誰更適合當前項目的開發。

SASS（SCSS）

官網：Sass: Syntactically Awesome Style Sheets
在線編輯器：SassMeister | The Sass Playground!

SASS 是採用 Ruby 語言編寫的一款 CSS 預處理語言，誕生於2007年。最初是為了配合 HAML（一種縮進式 HTML 預編譯器）而設計的，因此有著和 HTML 一樣的縮進式風格，以 “.sass” 後綴為擴展名。

而 SCSS 是 SASS3 版本當中引入的新語法特性，完全兼容 CSS3 的同時也繼承了 SASS 強大的動態功能。是以 “.scss” 後綴為擴展名。

兩者的不同點是語法書寫方式的不同，SASS 以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和 CSS 語法書寫方式非常類似。這也是 SASS 後來越來越受大眾喜歡原因之一。簡單點說，把現有的 “.css” 文件直接修改成 “.scss” 即可使用。

基本語法

變量：在 SASS 中聲明變量必須是 $ 開始，然后變量名和值使用冒號隔開，跟 CSS 的屬性一致
.scss

$mainColor: white;
$siteWidth: 1024px;

body {
  color: $mainColor;
  max-width: $siteWidth;
}

編譯後的 .css

body {
  color: white;
  max-width: 1024px;
}

嵌套：SASS 提供了選擇器、屬性、偽類嵌套功能
.scss

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

編譯後的 .css

nav a {
  color:red;
}

header nav a {
  color:green;
}

繼承：選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend 語法實現
.scss

.error { 
  border: 1px solid red; 
  background-color: #fdd; 
} 

.seriousError { 
  @extend .error; 
  border-width: 3px; 
}

編譯後的 .css

.error { 
  border: 1px solid red; 
  background-color: #fdd; 
} 

.seriousError { 
  border: 1px solid red; 
  background-color: #fdd; 
  border-width: 3px; 
}

混合：@mixin 允許建立一組可以在整個樣式表中重複使用的樣式，而不需要重新建立非語義類，再使用 @include 呼叫
.scss

@mixin border-radius($radius) { 
  border-radius: $radius; 
  -ms-border-radius: $radius; 
  -moz-border-radius: $radius; 
  -webkit-border-radius: $radius;
 }

.box { 
  @include border-radius(10px); 
}

編譯後的 .css

.box { 
  border-radius: 10px; 
  -ms-border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
}

LESS

官網：Less.js: Getting started

LESS 是由 Alexis Sellier 在2009年設計，為一個開源專案。LESS 的第一個版本也是使用 Ruby 編寫，但在後來的版本被 JavaScript 替換。以 “.less” 後綴為擴展名。

變量：與 SASS 不同，聲明變量不是 $ 而是換成了 @
.less

@mainColor: white;
@siteWidth: 1024px;

body {
  color: @mainColor;
  max-width: @siteWidth;
}

編譯後的 .css

body {
  color: white;
  max-width: 1024px;
}

嵌套：和 SASS 相似

繼承：使用 :extend，若要進一步跟子元素有關聯，就可以使用 all，就會聯同子元素的樣式一起轉換進去
.less

.a1:extend(.b) {
  color:#f00;
}
.a2:extend(.b all) {
}
.b {
  border:1px solid;
  font-size:20px;
}
.b.c {
  text-align:20px;
}

編譯後的 .css

.a1 {
  color: #f00;
}
.b, .a1, .a2 {
  border: 1px solid;
  font-size: 20px;
}
.b.c, .a2.c {
  text-align: 20px;
}

混合：有別於 SASS 的寫法，LESS 的 mixin 長相跟 class 一模一樣，就是用一個「.」開頭，裡面放入變數重複使用，雖然跟 class 一樣，但如果是帶有小括號，轉出來的 CSS 是不會出現的
.less
```
.fn1(@v) {
  border-width: @v;
}
.box1 {
  .fn1(10px);
}
```
編譯後的 .css
```
.box1 {
  border-width: 10px;
}
```

以上我們簡單概述了 SASS 與 LESS 的基本語法，其中還有許多語法糖和功能是值得做更深入學習。熟悉預處理器，在撰寫 CSS 時則如虎添翼！

也別忘了追蹤歐斯瑞臉書粉絲團、Instagram，以及訂閱我們的電子報，隨時接收第一手新知分享！

參考：
https://changtsuiling.gitbooks.io/sass/content/
https://www.oxxostudio.tw/articles/201601/css-less-01.html

前端開發, 技術應用

CSS 預處理器 SASS、LESS 介紹