為什麼 SCSS 更適合寫 CSS

發佈於2024-11-04

Why SCSS is Better for Writing CSS

在編寫 CSS 時，您可能會遇到一些常見問題：重複相同的程式碼、管理複雜的樣式或在大型專案中保持事物井井有條。這就是 SCSS 的用武之地。 SCSS (Sassy CSS) 是 CSS 的升級版本，可協助您編寫更乾淨、更有組織且可重複使用的程式碼。

在本文中，我們將解釋為什麼 SCSS 是一個很棒的工具，以及它如何解決一些 CSS 單獨無法應對的挑戰。

為什麼要使用 SCSS？

雖然 CSS 很簡單且適用於小型項目，但隨著網站的發展，它可能會變得難以管理。 SCSS 為您提供更強大的工具來編寫更好的程式碼。以下是使用 SCSS 的主要原因：

變數： SCSS 允許您為顏色和字體大小等值建立變數。這意味著您可以在一個地方更改值，並且它會在任何地方更新。
Mixins： SCSS 允許您建立可重複使用的程式碼片段，稱為 mixins。這樣可以節省時間並減少重複。
模組化： SCSS 可協助您將大型 CSS 檔案分割成更小的部分，使其更易於管理。

SCSS 如何解決常見 CSS 問題

使用變數避免重複

在 CSS 中，您經常必須重複相同的顏色、字體或大小。使用 SCSS，您可以將這些值儲存在變數中並在任何地方重複使用它們。

CSS:

.button {
  background-color: #007BFF;
  color: #FFFFFF;
}

.link {
  color: #007BFF;
}

SCSS:

$primary-color: #007BFF;
$text-color: #FFFFFF;

.button {
  background-color: $primary-color;
  color: $text-color;
}

.link {
  color: $primary-color;
}

在 SCSS 中，您可以在變數 ($primary-color) 中定義顏色，然後在樣式中使用它們。如果以後需要更改顏色，只需更新變量，它就會隨處變化。

使用 Mixins 實作可重複使用程式碼

CSS:

.button {
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #007BFF;
  color: white;
}

.link {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: transparent;
  color: #007BFF;
}

SCSS:

@mixin button-style($padding, $bg-color, $text-color) {
  padding: $padding;
  border-radius: 4px;
  background-color: $bg-color;
  color: $text-color;
}

.button {
  @include button-style(10px 20px, #007BFF, white);
}

.link {
  @include button-style(5px 10px, transparent, #007BFF);
}

在這裡，按鈕式混合可以幫助您避免重複相同的樣式。您無需一遍又一遍地編寫相同的屬性，而是在 mixin 中定義它們並在需要時使用它們。