SCSS 與 CSS 的基本區別：入門指南

在網頁設計的世界中，SCSS 和 CSS 經常被拿來做比較。但是，這兩者到底有什麼不同？今天，我們將探討這兩者的基本區別，並提供一些程式碼範例以供參考。此外，我們也會了解為何許多開發者傾向於使用 SCSS 而非純粹的 CSS。

1. 什麼是 CSS？

CSS（Cascading Style Sheets）是用來控制 HTML 文件樣式和佈局的語言。它為網頁提供了一種結構與美觀的方式。

/* CSS 範例 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

2. 什麼是 SCSS？

SCSS（Sassy CSS）是 CSS 預處理器之一，它使得 CSS 更加強大和靈活。SCSS 允許使用變數、函式、混入（mixin）等高級功能。

// SCSS 範例
$font-stack: Arial, sans-serif;
body {
  font-family: $font-stack;
  margin: 0;
  padding: 0;
}

3. SCSS 與 CSS 的基本區別

變數

SCSS 允許使用變數，這讓你可以輕易地在多個地方使用相同的值。

// 使用變數
$primary-color: #3498db;
button {
  background-color: $primary-color;
}

CSS 原生目前也支持自定義屬性作為變數，但支持度和功能性較不完整。

巢狀規則

SCSS 支持巢狀規則，使得代碼更為組織化。

// 巢狀規則
nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
}

函式和混入（Mixin）

SCSS 支持自定義函式和混入，這讓你可以重用多個 CSS 規則。

// 混入範例
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

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

4. 為何要使用 SCSS？

• 代碼重用性高：變數和混入功能使得代碼更容易管理。
• 可維護性強：巢狀規則和組織化的語法使得維護工作更容易。
• 社群支持強：許多前端開發框架（如 Bootstrap）都使用 SCSS。

5. 程式碼範例

以下是一個簡單的 SCSS 範例，展示如何使用變數和混入。

// 定義變數
$primary-color: #3498db;
$secondary-color: #2c3e50;

// 定義混入
@mixin btn-styles($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

// 使用變數和混入
.btn-primary {
  @include btn-styles($primary-color, #fff);
}

.btn-secondary {
  @include btn-styles($secondary-color, #fff);
}

結論

SCSS 優於 CSS 在於它提供了更多高級的功能和更好的可維護性。不過，使用哪一種取決於你的項目需求和個人喜好。希望這篇文章能幫助你了解這兩者的基本區別。