SCSS 語法介紹

SCSS（Sassy CSS）是 Sass 的一種語法，它擴展了 CSS，提供了一些強大的功能，如變量、嵌套、Mixin、繼承、運算等，使樣式開發更加靈活和高效。SCSS 是 CSS 的超集，這表示所有有效的 CSS 代碼也是有效的 SCSS 代碼。

以下是 SCSS 語法的詳細介紹：

1. 變量 ($ 符號)

SCSS 支持變量，變量可以存儲顏色、字體、尺寸等值，並在樣式表中重複使用。

scss 範例：

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$base-margin: 10px;

body {
  font-family: $font-stack;
  color: $primary-color;
  margin: $base-margin;
}

css 結果：

body {
  font-family: Helvetica, sans-serif;
  color: #3498db;
  margin: 10px;
}

2. 嵌套

SCSS 支持選擇器的嵌套，這使得樣式層次結構更加清晰，並且可以模仿 HTML 結構進行樣式設計。

scss 範例：

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $primary-color;

    &:hover {
      text-decoration: underline;
    }
  }
}

css 結果：

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  text-decoration: none;
  color: #3498db;
}

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

3. 父選擇器引用 (& 符號)

在嵌套中，& 用來引用父選擇器。這在處理偽類、偽元素或修改父元素樣式時非常有用。

scss 範例：

.button {
  display: inline-block;
  padding: 10px 20px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }

  &.active {
    background-color: $primary-color;
  }
}

css 結果：

.button {
  display: inline-block;
  padding: 10px 20px;
}

.button:hover {
  background-color: #2980b9;
}

.button.active {
  background-color: #3498db;
}

4. Mixin（混合）

Mixin 是一種可以重複使用的樣式塊，類似於函數。你可以通過 @mixin 來定義 Mixin，並使用 @include 來調用。

scss 範例：

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

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

css 結果：

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

5. 繼承 (@extend)

SCSS 支持繼承樣式，這樣可以讓一個選擇器繼承另一個選擇器的樣式。

scss 範例：

.message {
  padding: 10px;
  border: 1px solid #ddd;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

css 結果：

.message, .success, .error {
  padding: 10px;
  border: 1px solid #ddd;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

6. 運算

SCSS 支持數字、顏色、字串等運算，可以在樣式中進行加減乘除或顏色操作。

scss 數字運算：

$base-padding: 10px;

.container {
  padding: $base-padding * 2;
}

css 結果：

.container {
  padding: 20px;
}

scss 顏色運算：

$primary-color: #3498db;

.button {
  background-color: lighten($primary-color, 10%);
}

.alert {
  background-color: darken($primary-color, 10%);
}

css 結果：

.button {
  background-color: #5dade2;
}

.alert {
  background-color: #2980b9;
}

7. 條件與循環

SCSS 允許使用條件語句和循環來控制樣式的生成。

scss: @if 和 @else 條件：

$theme: light;

body {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

css 結果：

body {
  background-color: white;
  color: black;
}

scss: @for 循環：

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

css 結果：

.col-1 {
  width: 100%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 33.3333%;
}

8. 部分（Partials）與導入

SCSS 支持將樣式拆分成多個文件，然後使用 @import 導入它們。這樣可以讓代碼更具結構性。

假設你有一個 _variables.scss 文件：

scss

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

在主 SCSS 文件中導入：

scss

// styles.scss
@import 'variables';

body {
  color: $primary-color;
}

css 結果：

body {
  color: #3498db;
}

注意：使用 @import 時，導入的文件名需要以 _ 開頭，這樣它不會被單獨編譯成 CSS 文件。

9. 插值 (#{})

插值用來將變量或運算結果插入到選擇器或屬性中。

scss 範例：

$size: large;

.icon-#{$size} {
  font-size: 32px;
}

css 結果：

.icon-large {
  font-size: 32px;
}

10. 顏色函數

SCSS 提供了大量的內建顏色函數來操作顏色值，比如 lighten、darken、fade-in、fade-out 等。

scss 範例：

$primary-color: #3498db;

.button {
  background-color: lighten($primary-color, 20%);
  border-color: darken($primary-color, 10%);
}

小結

SCSS 提供了許多強大的功能，讓你可以以更具模組化和可維護性的方式來編寫樣式。這些功能包括：

變量：存儲重複使用的值。
嵌套：更清晰的層次結構。
Mixin 和繼承：重複使用樣式片段，避免代碼重複。
運算：在樣式中進行數值和顏色運算。
條件和循環：動態生成樣式。
這些功能幫助開發者更高效地管理樣式表，特別是在大型項目中，SCSS 可以顯著提高開發和維護的效率。如果你有更多問題，隨時告訴我！