Sass 簡介

Sass 是一種 CSS 的預處理器，它讓你能使用變數、嵌套、繼承等功能來編寫更具結構和維護性的 CSS。當我們寫完 Sass 代碼後，會被編譯成純 CSS 以供瀏覽器使用。

變數 (Variables)

Sass 允許我們定義變數來儲存可重用的值，比如顏色、字體大小、間距等，這樣能減少代碼重複並提高維護性。

語法：

$primary-color: #3498db;
$font-size-base: 16px;

body {
  color: $primary-color;
  font-size: $font-size-base;
}

• 變數以 $ 符號開頭。
• 可以在 CSS 屬性中使用變數來設置值。
• 變數可用來定義任何 CSS 屬性值，如顏色、尺寸等。

變數範例：

$spacing-unit: 10px;

.header {
  margin-bottom: $spacing-unit;
}

.button {
  padding: $spacing-unit * 2;
}

嵌套 (Nesting)

Sass 允許我們以嵌套的方式編寫選擇器，這讓代碼結構更清晰，尤其在處理複雜的層次結構時非常有用。

語法：

.nav {
  background: #333;
  .nav-item {
    color: #fff;
    &:hover {
      color: #3498db;
    }
  }
}

• 可以直接在父級選擇器中嵌套子級選擇器，避免重複書寫選擇器名稱。
• & 符號代表父選擇器，可以用來指向當前的父級選擇器，常用於偽類或偽元素。

嵌套範例：

.footer {
  background-color: #2c3e50;
  .footer-links {
    list-style: none;
    li {
      display: inline-block;
      margin-right: 10px;
      a {
        color: #ecf0f1;
        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

Sass 的優點

• 簡化代碼：嵌套讓層次結構更加清晰，減少重複代碼。
• 變數管理：所有重複使用的樣式都可以通過變數控制，方便修改和管理。
• 模組化：Sass 支持將樣式拆分成多個文件，進一步提升代碼的結構和可維護性。

Sass 編譯方式

我們需要將 .scss 文件編譯為 .css 文件供瀏覽器使用。可以使用以下方式：

• 命令行編譯：sass input.scss output.css
• 自動化工具：可以使用 Gulp、Webpack 等工具來自動編譯 Sass 文件。