對剛入門 Web 前端開發的同學而言，HTML、CSS 和 JavaScript 是一定會學到的三大技術。然而，就像 JavaScript 現在有 React, Vue, Angular, Svelte, Astro, Solid ... 數不清的框架，讓你可以不用真的慢慢手寫原始的 JavaScript，你知道 CSS 也有很多工具可以讓你的切版工作更輕鬆嗎？

這個系列的文章希望用一個比較短的篇幅讓剛入門 Web 前端開發的同學可以瞭解 Sass, Scss, Less, PostCSS, TailwindCSS 這些常用的 CSS 工具是什麼概念。你不需要要求自己完全掌握這麼多的技能，但只要能夠知道他們是什麼、有什麼差別，以及在需要的時候知道怎麼在網路上查到對應的資料就可以了。

什麼是 CSS Preprocessor (預處理器）

相信正在讀這篇文章的讀者都已經知道基本的 CSS 語法，你在學習的過程中可能會發現 CSS 多少有些使用起來不太直觀的地方，一個最常見的例子是如果我們的網站是一個巢狀結構：

<div class="container">
  <div class="top-nav">
    <div class="logo">
      <!-- ... -->
    </div>
    <div class="title">
      <!-- ... -->
    </div>
  </div>
  <div class="content">
    <div class="logo">
      <!-- ... -->
    </div>
    <div class="title">
      <!-- ... -->
    </div>
  </div>
</div>
<div class="footer">
  <div class="logo">
    <!-- ... -->
  </div>
  <div class="title">
    <!-- ... -->
  </div>
</div>

那你在 CSS 裡面幫不同位置的元素編寫樣式的時候，很可能就會寫成這樣子：

.container > .top-nav > .logo {
  ...
}

.container > .top-nav > .title {
  ...
}

.container > .content > .logo {
  ...
}

.container > .content > .title {
  ...
}

.footer > .logo {
  ...
}

.footer > .title {
  ...
}

當然，你可以選擇幫整個網站所有區塊都取一個獨一無二的名字，這樣就不需要像上面一樣寫一個這麼長的選擇器，但你會需要在幫每個區塊命名時傷透腦筋。

所謂的 CSS Preprocessor 就是，讓我們能夠用比較直觀方便的語法來實現相同的效果，甚至還能以此為基礎擴充更強大的功能（例如 條件判斷），比如說上面的這個巢狀結構，如果我們在 CSS 裡面也可以寫成：

.container {
  // container 的樣式
  .top-nav {
    // container 裡面 top-nav 的樣式
    .logo {
      // container 裡面 top-nav 裡面 logo 的樣式
    }
    .title {
      // container 裡面 top-nav 裡面 title 的樣式
    }
  }
  .content {
      // container 裡面 content 的樣式
    .logo {
      // container 裡面 content 裡面 logo 的樣式
    }
    .title {
      // container 裡面 content 裡面 title 的樣式
    }
  }
}
.footer {
  // footer 的樣式
  .logo {
    // footer 裡面 logo 的樣式
  }
  .title {
    // footer 裡面 title 的樣式
  }
}

是不是非常直觀呢？基本上 CSS 檔案的結構和 HTML 幾乎一樣了，無論是在編寫還是後面回來看都可以非常快速方便的定位到我們想要的樣式寫在哪裡。而把這個方便但瀏覽器無法讀取（因為不是 CSS 語法）的檔案轉換成瀏覽器看的懂的標準 CSS 語法，正是 CSS Prepreprocessor 的工作。

Scss 語法

Scss 是 Sass 語法的一種形式，全名叫做 Sassy CSS，他是以傳統 CSS 語法為基礎並加入 Sass 的特色功能，並且他的特色是完全兼容傳統的 CSS 的語法，也就是直接把 CSS 當成 SCSS 也是可以的。

上面的巢狀結構示範就是一種 SCSS 語法的表現，Scss 具體的特色功能和使用方式將在下面和 Sass 語法一起介紹。

Sass 語法

Sass 代表的是 Syntactically Awesome Stylesheets，直接翻成中文就是「語法超讚的樣式表」。和 Scss 語法不同，Sass 在語法上做出了很大的差異，他用「縮排」代替「大括號」，用「換行」代替「分號」，這讓他的語法看起來十分簡潔，例如：

.container
  background: red

  .top-nav 
    border: 1px solid

    .logo 
      width: 32px
      height: 32px
    
    .title 
      font-size: 64px
  
  .content 
    pading: 0 12px

    .logo 
      width: 64px
      height: 64px
    
    .title 
      font-size: 48px

除了上面這種最簡單的巢狀語法，還有很多方便的擴展語法，比如說父元素選擇器：

#main
  color: black

  a
    font-weight: bold

    &:hover
      color: red

這個 & 就是父元素選擇器，他代表的是包著他的父元素，編譯之後會變成這樣的 CSS 檔案：

#main {
  color: black; 
}

#main a {
  font-weight: bold; 
}

#main a:hover {
  color: red; 
}

Sass / Scss 也可以讓你把相同類型的屬性聚在一起寫：

.funky
  font: 
    family: fantasy
    size: 30em
    weight: bold

上面的例子中，我們把 family, size 和 weight 都寫在 font: 下面，因為他們都是代表字體的其中一種屬性。編譯以後會變成：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

你甚至可以像定義一個函數一樣，根據傳入的參數生成對應的樣式，這對於需要重複使用但又有部分不同的樣式非常實用：

@mixin sexy-border($color, $width)
  border:
    color: $color
    width: $width
    style: dashed

p
  font-size: 12px
  @include sexy-border(blue, 1in)

是不是看起來就好像我們定義了一個函數叫做 sexy-border，他接受 color 和 width 兩個參數，然後生成對應的結果？他編譯出來會變成這樣：

p {
  font-size: 12px;
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

還有非常非常多 CSS 沒有的擴充功能，你都可以用 Sass/Scss 語法來實現，但這篇文章不會全部列出來，你也不需要全部記起來！當你需要的時候，再到 Sass 官方文檔 邊查邊用就可以了 👍

Less 語法

Less 是 Leaner Style Sheets 的意思。和 Sass/Scss 一樣，Less 也是一種 CSS Preprocessor，而且他們能實現的功能幾乎相同，所有你想要的功能都可以在兩個語法的官方文檔中找到對應的用法，一般只是細微的符號區別。例如在 Sass 中你可以用 $ 符號來定義變數：

$color: white

.title
  color: $color

但在 Less 中，我們使用 @ 符號來定義變數：

@nice-blue: #5B83AD;  
@light-blue: @nice-blue + #111;  

#header {
  color: @light-blue;  
}   

然而，除了這些細節的語法區別，更大的不同點其實是他們的實現方式：Sass 一開始是用 Ruby 語言實現的，這意味著他只能在網站從原始碼打包的時候運行，或是在網站伺服器接受請求的時候在後端運行。現在新版本的 Ruby 則有用 dart 語言或 C/C++ 語言實現的各種版本。

然而，Less 則是用 Web 前端開發最愛用的 JavaScript 語言來實現的，這代表我們可以把他運行在瀏覽器內，甚至可以直接用我們熟悉的 JavaScript 語法幫他開發自己需要的插件。但用 JavaScript 實現的劣勢也顯而易見，那就是效能的問題。如果一個超大型網站全部的樣式都用 Less 來編寫，那麼將他完全轉譯為 CSS 會需要花上一段時間。

如何在自己的網站使用 Sass / Scss 語法

我們將要透過 Node.js 的套件管理工具 npm 來安裝 Sass 工具，如果你是還沒安裝過 Node.js 的同學，記得先在電腦上安裝哦！安裝好了以後用這個指令進行安裝：

npm install -g sass

其中 -g 代表的是 global，也就是全局安裝的意思，透過全局安裝我們可以把 Sass 安裝為電腦上的一個工具，並且在任何地方都能直接使用。使用方式是：

sass input.scss output.css

同學們需要將 input.scss 替換成自己的 .scss 或 .sass 樣式檔案，而後面的 output.css 就是經過轉換生成的結果，將這個轉換結果引入 HTML 即可：

<head>
  <link rel="stylesheet" href="output.css">
</head> 

如何在自己的網站使用 Less 語法

和 Sass 類似的，我們也可以直接用 npm 來全局安裝 Less 工具到電腦上：

npm install -g less

然後就可以用它來轉換我們寫的 Less 樣式檔：

less input.less output.css

用相同的方式引入 HTML 即可：

<head>
  <link rel="stylesheet" href="output.css">
</head> 

等等，還記得我們剛剛說 Less 是用 JavaScript 實現的，所以他可以直接運行在瀏覽器嗎？所以其實你甚至不用把 Less 安裝到電腦上！直接在 HTML 加入：

<head>
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
</head>

你會發現，我們居然直接像引入 css 檔案一樣引入了 less 檔案。原本瀏覽器是看不懂你寫的 less 檔案的，但下一行引入的 JavaScript 會幫我們把他翻譯成瀏覽器看的懂的樣式，真的是太方便了。

結語

這篇文章主要和大家介紹了一下 Sass / Scss 和 Less 這幾種好用的 CSS 預處理器，相信透過這些方便的工具能夠大大提升網站切版所需要的時間。在這個系列後面的部分將繼續介紹各種不同的樣式工具，包含更新的 PostCSS 以及我最愛的 TailwindCSS 等等。請大家拭目以待！