根據官方文件說明，Sass有兩種語法，最常用的是SCSS語法（.scss），而另一種的縮排語法（.sass）則比較不常見。縮排語法使用縮排而不是中括號來嵌套程式碼，並使用換行來分隔內容。看個人選擇要使用哪種語法，接下來都會以SCSS語法說明，如果想知道縮排語法的使用，可以參考看看官方文件。

跟著官方文件學習SASS

現在，讓我們來看看為什麼使用Sass很值得，以及能夠幫助我們在CSS開發上帶來哪些好處。

1. 變數（Variables）

在Sass中，我們可以定義變數來存儲各種屬性的值，例如顏色、字體大小、間距等等。這意味著我們可以在整個代碼中重複使用這些值，而不必多次重覆輸入(或者要重複多次修改)。

$primary-color: #3498db; //使用"$"定義變數
$font-size: 16px;

button {
  background-color: $primary-color;
  font-size: $font-size;
}

2. 嵌套規則（Nested Rules）

Sass允許我們將CSS規則嵌套在其他規則內，這樣可以更好地組織樣式。對於定義子元素的樣式特別好用。

nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

3. 混入（Mixins）

讓我們在多個規則中共享相同的CSS屬性內容。這可以幫助我們減少代碼重複，同時使得樣式更容易更新維護。

@mixin button-styles {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.button-primary {
  @include button-styles;
  background-color: #3498db;
  color: #fff;
}

.button-secondary {
  @include button-styles;
  background-color: #e74c3c;
  color: #fff;
}

4. 運算子（Operators）

我們可以使用運算子執行各種操作，例如計算、轉換顏色等。這樣可以在樣式中實現更複雜多樣的功能。

$base-font-size: 16px;

body {
  font-size: $base-font-size * 1.2;
}

參考資料：

1. Sass:Sass Basics：https://sass-lang.com/guide/