Sass

習題預習

1. Sass是什麼？它的主要功能是什麼？
2. Sass如何實現CSS的編譯和生成？
3. Sass支持哪些特性和功能，如何使用這些特性和功能？
4. Sass的變量和Mixin是什麼？它們有什麼作用？
5. Sass的嵌套和擴展性是什麼？如何使用它們來簡化CSS代碼？

說明知識

Sass是一種CSS預處理器，它使得CSS的編寫更加容易且高效。Sass相較於原本的CSS，可以更好地支持變數、巢狀規則、混入（Mixin）、繼承等高級特性，並支持更簡潔明瞭的編寫方式。

以下是一個簡單的Sass示例：

// 定義變數
$primary-color: #007bff;

// 編寫混入
@mixin btn-style {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

// 使用混入
.btn {
  @include btn-style;
}

// 編寫巢狀規則
.card {
  background-color: #f7f7f7;
  padding: 10px;

  .card-title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .card-body {
    font-size: 16px;
    line-height: 1.5;
  }
}

在上面的示例中，定義了一個名為$primary-color的變數，然後編寫了一個名為btn-style的混入，將$primary-color用於簡單的按鈕樣式中，然後在.btn的類名中調用此混入以使用按鈕樣式。

同時，示例中使用了巢狀的規則，使設計更加易於理解。例如，.card的子元素.card-title和.card-body均可在.card規則中定義，且不需使用多個CSS層級以明確指定每個規則。

彙總重點

1. Sass是一種CSS預處理器，它可以讓開發者更加高效地創建和維護CSS代碼。
2. Sass提供了許多改進CSS的功能，如變量、混合、嵌套等。
3. Sass的變量可以讓開發者在多處使用相同的值，以減少代碼重複。
4. Sass的混合功能可以讓開發者輕鬆創建多個CSS屬性和值的組合，以減少代碼重複。
5. Sass的嵌套功能可以讓CSS代碼更加具有結構性和可讀性，並減少代碼嵌套的程度。
6. Sass還提供了其他功能，如計算、Inheritance等，這些都可以讓開發者在進行CSS代碼編寫的時候更加靈活和高效。
7. Sass使用的是SCSS語法，這種語法與傳統的CSS語法相似，因此開發者可以很容易的學習和使用Sass。
8. Sass與其他前端框架和工具，如React、Vue、Webpack等都有良好的兼容性。這可以讓開發者更加方便地在這些工具中使用Sass。
9. Sass的代碼可以通過編譯成CSS文件來使用，這樣就可以避免在網站上使用Sass的性能問題。

知識測驗

1. 如何在Sass中定義一個可重複使用的Mixin (混合物)？
   答：使用 @mixin 和 @include。例如：

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

.box {
  @include box-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

2. 如何在Sass中定義一個變數，用於儲存顏色？
   答：使用 $ 符號開頭，例如：

$primary-color: #007bff;

3. 如何使用Sass的運算功能計算兩個長度的和？
   答：使用加號，例如：

width: 100px + 50px;

4. 如何使用Sass的流程控制功能（if、for、each、while）？
   答：例如，使用 if ：

@if lightness($color) > 50% {
  background-color: black;
} @else {
  background-color: white;
}

或使用 for 循環：

@for $i from 1 through 3 {
  .class-#{$i} {
    width: 10px * $i;
  }
}

5. 如何使用 Sass 的 extend 擴展選擇器的屬性？
   答： 使用 @extend, 用於擴展已有選擇器的屬性， 例如：

.sizing {
  font-size: 20px;
  padding: 10px;
}

.btn {
  @extend .sizing;
  background-color: $primary-color;
  color: white;
}