前言

在現代的前端開發中，CSS已成為呈現網頁和應用程序樣式的核心。然而，原生的CSS語法在大型項目中可能變得混亂、冗長且難以維護。
為了解決這些問題，SCSS（Sass CSS）和Sass（Syntactically Awesome Style Sheets）應運而生。
本文將帶你簡單了解sass和scss。

sass中文網
scss中文網

SCSS

SCSS（Sass CSS）是一種CSS預處理器，它擴展了普通的CSS語法，提供了更強大、更靈活的功能。
SCSS使用類似于CSS的語法，并引入了變量、嵌套、混合、繼承等概念，使得CSS代碼更易于編寫和維護。

1. 變量（Variables）：您可以使用變量來存儲顏色、字體、間距等重復使用的值，并在需要的地方引用它們。這樣可以簡化代碼，方便統一修改。

   $primary-color: #007bff;.button {background-color: $primary-color;
   }
   

2. 嵌套選擇器（Nested Selectors）：可以在SCSS中嵌套選擇器，以減少代碼量，改善可讀性。

   .container {width: 100%;.title {font-size: 24px;}
   }
   

3. 混合（Mixins）：混合是一段可重用的代碼塊，可以像函數一樣在需要的地方引用。它可以包含任意數量的屬性和樣式。

   @mixin flexbox {display: flex;justify-content: center;align-items: center;
   }.container {@include flexbox;
   }
   

4. 繼承（Extend）：可以通過繼承樣式來減少重復的CSS代碼。

   .button {border: 1px solid #ccc;padding: 10px;
   }.primary-button {@extend .button;background-color: #007bff;color: #fff;
   }
   

5. 導入其他文件（Import）：可以將SCSS代碼拆分到多個文件中，并使用@import指令將它們導入到主文件中。

   // main.scss
   @import "variables";
   @import "buttons";
   

6. @content 是 Sass/SCSS 中的特殊指令，用于在自定義的混入(Mixin）中傳遞代碼塊。通過使用 @content，可以將一個或多個代碼塊傳遞給混入，并在混入中使用這些代碼塊。

   @mixin media-query($size) {@media (max-width: $size) {@content;}
   }.container {width: 100%;@include media-query(768px) {background-color: #f5f5f5;}
   }
   

   編譯后的 CSS 代碼如下所示：

   .container {width: 100%;
   }@media (max-width: 768px) {.container {background-color: #f5f5f5;}
   }
   

   應用: 創建適應不同屏幕尺寸或其他條件的樣式。

以上只是SCSS的一小部分功能和用法。SCSS還提供了更多的功能，如條件語句、循環、函數等，以及靈活的配置選項,更多內容見scss中文網。

---

Sass

Sass（Syntactically Awesome Style Sheets）是一種CSS預處理器，它擴展了普通的CSS語法，并提供了更多的功能和特性。
Sass與SCSS非常相似，實際上，SCSS是Sass的一種語法擴展，可以說是更加兼容和易于學習的版本。

以下是一些Sass的特性和用法：

1. 變量（Variables）：在Sass中，使用變量來存儲重復的值，例如顏色、字體大小、間距等，并在需要的地方引用它們。

   $primary-color: #007bff.buttonbackground-color: $primary-color
   

2. 嵌套選擇器（Nested Selectors）：在Sass中嵌套選擇器，以減少代碼量和改善可讀性。

   .containerwidth: 100%.titlefont-size: 24px
   

3. 混入（Mixins）：混入是一段可重用的代碼塊，在需要的地方引用它們。與SCSS類似，混入可以包含任意數量的屬性和樣式。

   @mixin flexboxdisplay: flexjustify-content: centeralign-items: center.container@include flexbox
   

4. 繼承（Extend）：Sass允許通過繼承樣式來減少重復的CSS代碼。

   .buttonborder: 1px solid #cccpadding: 10px.primary-button@extend .buttonbackground-color: #007bffcolor: #fff
   

5. 導入其他文件（Import）：您可以將Sass代碼拆分到多個文件中，并使用@import指令將它們導入到主文件中。

   // main.sass
   @import variables
   @import buttons
   

---

Sass 和 SCSS 的區別

• Sass：

  • 使用縮進來表示層級關系，沒有大括號和分號。
  • 通過空行、縮進和冒號來表示屬性和值的關系。
  • 嵌套選擇器使用父級選擇器后跟子級選擇器的方式，可以減少代碼量。
  • 沒有必要寫單位，如可以直接寫 margin: 10，Sass 會自動添加單位。
  • 變量定義符號為 $，例如 $primary-color: #007bff。
  • 混入使用 @mixin 聲明，通過 @include 引用。
  • 文件后綴名為 .sass。

  // main.sass$primary-color: #007bff.containerwidth: 100%.titlefont-size: 24px.buttonbackground-color: $primary-color
  

• SCSS：

  • 使用花括號和分號來表示層級關系和語句結束。
  • 屬性和值之間使用冒號來進行分隔。
  • 嵌套選擇器使用普通的 CSS 語法，以大括號表示。
  • 需要明確寫明單位，如 margin: 10px。
  • 變量定義符號為 $，例如 $primary-color: #007bff。
  • 混入使用 @mixin 聲明，通過 @include 引用。
  • 文件后綴名為 .scss。

  // main.scss$primary-color: #007bff;.container {width: 100%;.title {font-size: 24px;}
  }.button {background-color: $primary-color;
  }
  

• 無論是Sass還是SCSS，最終都會被編譯為普通的CSS代碼

  /* main.css */.container {width: 100%;
  }.container .title {font-size: 24px;
  }.button {background-color: #007bff;
  }