CSS, Web Dev, Notes — Dec 25, 2023

📚 SCSS Crash Course

SCSS 是一種用於簡化和增強 CSS 的語言，它具有變數、巢狀規則、混入、函數等功能，使得 CSS 更易於維護和擴展。

1. 安裝 Sass

首先，確保你的開發環境中已經安裝了 Sass。你可以使用 npm（Node.js 包管理器）來安裝 Sass：

npm install -g sass

2. 創建 SCSS 文件

在你的專案中，創建一個新的 .scss 文件，例如 styles.scss。

3. 基本語法

變數 (Variable) 🔥

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

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

巢狀規則 (Nested) 🔥

nav {
  background: $primary-color;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

對應的 CSS

nav {
  background: $primary-color;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

父選擇器或巢狀選擇器 (Parent Selector) 🔥

在 SCSS 中，& 符號被稱為“父選擇器”（Parent Selector）或“嵌套選擇器”（Nested Selector）。它在 SCSS 中的主要作用是引用父選擇器的上下文，使得在嵌套的情況下能夠更靈活地構建和生成 CSS。

以下是一些常見用法：

嵌套選擇器：

nav {
  background: #333;

  a {
    color: #fff;
    &:hover {
      text-decoration: underline;
    }
  }
}

對應的 CSS：

nav {
  background: #333;
}

nav a {
  color: #fff;
}

nav a:hover {
  text-decoration: underline;
}

在這裡，& 用於引用其上下文中的父選擇器 nav。

擴展選擇器：

.button {
  background: blue;
  &.active {
    background: red;
  }
}

對應的 CSS：

.button {
  background: blue;
}

.button.active {
  background: red;
}

在這裡，& 被用於嵌套地構建 .button.active。

混入 (Mixin) 🔥

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

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

導入 (Import) 💡

// _variables.scss
$primary-color: #3498db;

// styles.scss
@import "variables";

body {
  color: $primary-color;
}

擴展 (Extend) 💡

擴展是一種 SCSS 功能，允許你使用一個選擇器的樣式來擴展另一個選擇器的樣式，類似於 CSS 中的類。這可以減少代碼的重複並提高可維護性。

SCSS 範例

%button-style {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
}

.btn-primary {
  @extend %button-style;
  background-color: #3498db;
  color: #fff;
}

.btn-secondary {
  @extend %button-style;
  background-color: #e74c3c;
  color: #fff;
}

在這個例子中，%button-style 是一個 placeholder，它包含了通用的按鈕樣式。然後，btn-primary 和 btn-secondary 透過 @extend 將這些通用樣式擴展到具體的按鈕類別中。

對應的 CSS

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
}

.btn-primary {
  background-color: #3498db;
  color: #fff;
}

.btn-secondary {
  background-color: #e74c3c;
  color: #fff;
}

函數 (Function)

SCSS 允許你定義和使用函數，這樣你就可以更靈活地處理數據和生成樣式。

SCSS 範例
```
@function calculate-width($width, $padding) {
  @return $width + 2 * $padding;
}

.container {
  width: calculate-width(200px, 10px);
  padding: 10px;
}
```
在這個例子中，calculate-width 函數接受兩個參數：$width 和 $padding，然後返回計算後的寬度。這個函數被用於設置 .container 元素的寬度。

4. 編譯 SCSS 到 CSS

在終端機中執行以下命令，將你的 SCSS 文件編譯成 CSS：

sass input.scss output.css

或者，如果你想要在每次保存文件時自動編譯，可以使用以下命令：

sass --watch input.scss:output.css

5. Sass 與 SCSS 語法差異

Sass（Syntactically Awesome Stylesheets）和 SCSS（Sassy CSS）都是 CSS 預處理器，它們提供了一些額外的功能和語法來更有效地編寫和管理樣式表。以下是 Sass 和 SCSS 的主要差異：

語法差異：

Sass： 使用縮進來表示區塊和層次結構，並且不使用分號和大括號。例如：

body
  font: 14px/1.4 "Helvetica Neue", sans-serif
  color: #333

.container
  width: 100%
  margin: 0 auto

SCSS： 使用大括號表示區塊和分號來結束每個聲明，更接近傳統的 CSS 語法。例如：

body {
  font: 14px/1.4 "Helvetica Neue", sans-serif;
  color: #333;
}

.container {
  width: 100%;
  margin: 0 auto;
}

文件擴展名：

Sass： Sass 文件使用 .sass 作為擴展名。
SCSS： SCSS 文件使用 .scss 作為擴展名。