當談到SCSS（Sass）時，通常是在談論一種用於編寫CSS的擴展語言。SCSS代表"Sassy CSS"，它是CSS的超集，具有更多功能和優勢，使開發人員更容易編寫和管理大型或複雜的CSS代碼

1.嵌套

SCSS允許您以更嵌套的方式組織CSS規則，使代碼更易讀和維護。您可以將子選擇器嵌套在父選擇器中，以顯示HTML文檔的層次結構。

.container {
  width: 100%;
  .header {
    font-size: 24px;
  }
  .content {
    background-color: #f1f1f1;
  }
}

2.變數

您可以定義變數來存儲顏色、字體、間距等值，然後在整個SCSS代碼中重複使用這些變數，使全局樣式更易於更改和維護。

$primary-color: #007bff;
$font-family: "Arial", sans-serif;

.button {
  background-color: $primary-color;
  font-family: $font-family;
}

3.混入（Mixins）

混入允許您定義可重用的CSS規則集，然後在需要時引用它們。這有助於減少代碼的冗余性。

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

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

4.繼承

您可以通過繼承一個選擇器的樣式來創建新的選擇器。這有助於避免重複定義相似的樣式。

.error-message {
  border: 1px solid red;
  color: red;
}

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

5.邏輯控制

SCSS支持if/else語句，讓您根據條件動態生成CSS規則。

$theme: dark;

body {
  @if $theme == dark {
    background-color: #333;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #333;
  }
}

6.模塊化

SCSS使得在項目中的不同文件中分開編寫和組織CSS代碼變得容易。您可以將不同的SCSS文件匯入到一個主文件中，然後編譯為單個CSS文件。