Skip to content

簡介

scssLogo

為 CSS 預處理器（CSS Preprocessor），透過將程式模組化的概念，新增了變數、巢狀結構、混入、繼承等寫法，作為 CSS 語法的擴充，用以改善程式碼的結構與可維護性。有助於更好地組織管理樣式，以及更高效地開發專案。

👉 官方網站

優點

  • 減少CSS 重複的代碼，節省開發時間。
  • 完全兼容所有版本的CSS，並擴展了CSS3，增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。
  • 能生成良好格式化的CSS 代碼，可讀性高，易於組織和維護。

Sass/SCSS 寫法

Sass

  • 縮排語法，副檔名 .sass
  • 使用縮排方式編輯巢狀關係
Sass語法
1
2
3
4
5
6
7
$font-stack:Helvetica, sans-serif
$primary-color:#333

body 
  font: 100% $font-stack
  color: $primary-color  
  /*(1)*/
  1. 無括號與結尾分號，僅使用縮排方式

SCSS

  • 塊語法，副檔名 .scss
  • 使用大括號區分選擇器，使用分號區分屬性，較貼近原生 CSS
  • 較多人使用
SCSS語法
1
2
3
4
5
6
7
8
9
```SCSS linenums="1" title="SCSS語法" hl_lines="5 6"
$font-stack:Helvetica,sans-serif;
$primary-color:#333;

body {
  font: 100% $font-stack;
  color: $primary-color;

}

常用語法

  • 變數 Variables

    以錢字號 $ 來宣告變數，通常會寫在程式碼最上方，只要有引用該變數的地方，均可統一修改管理，常用於：按鈕顏色、字型字體大小等。

編譯前SCSS
1
2
3
4
  $text-color:#f00;
  body{
  color:$text-color; 
  }
編譯後CSS
1
2
3
  body{
  color:#f00;
  }

  • 混合 Mixins

    將經常被重複使用的程式碼獨立撰寫，以@mixin 語法包裝起來，需要時透過 @include 引用，即可根據不同參數來設定相似的樣式。亦可再結合@content，達到更有彈性的優點。實例: 運用於RWD斷點設定。

定義常用的斷點
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@mixin xlarge{
@media(min-width:1400px) {
    @content;
}
}
@mixin large {
@media(min-width:992px) {
    @content;
}
}
使用時引用
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.bannerImg {
width: 100%;
height: 350px;
object-fit: cover;

@include large {
  height: 518px;
  //在斷點 large時 高度變成518px
}
}

  • 繼承 Extend

    使用 @extend 繼承樣式，減少重覆撰寫。有下列兩種寫法(是否含有占位符(%))。
    區別在於 : 【使用%宣告】將不會產生實體的對象，例如標籤、class等。
    假設今天html裡沒有 .text-style 的class那麼就不必產生一個無意義的 .text-style，
    改用%的方式宣告可以減少不必要的css。

編譯前SCSS(使用占位符)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  %text-style {
    color: #333;
    font-size: 16px;
    letter-spacing: 2px;
  }

  h1 {
    @extend %text-style;
  }

  h2 {
    @extend %text-style;
  }
編譯後CSS(使用占位符)
1
2
3
4
5
h2, h1 {
    color: #333;
    font-size: 16px;
    letter-spacing: 2px;
}
編譯前SCSS(不使用占位符)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  .text-style{
  color:#333;
  font-size:16px;
  letter-spacing:2px;
  }

  h1{
  @extend .text-style;
  }

  h2{
  @extend .text-style;
  }
編譯後CSS(不使用占位符)
1
2
3
4
5
.text-style, h2, h1 {
color: #333;
font-size: 16px;
letter-spacing: 2px;
}
比較：@mixin 和 @extend 使用時機
  • @mixin 是將屬性及值同時放入有載入該樣式的目標對象裡，雖能減少重複撰寫樣式的時間，卻也可能造成編譯後的 CSS 樣式大量重複，使檔案異常肥大。
  • @extend 同樣能解決重用問題，搭配佔位符，將目標對象進行合併再一起指向共同的樣式。

@mixin 和 @extend 兩者的使用時機與差異，可從下列兩點來思考。 若不需傳遞參數而又不希望CSS太大時，建議使用 @extend

  • 是否需傳遞參數
  • 是否需考慮編譯後 CSS 大小

模組化管理

依專案所需規劃，可將不同功能的樣式拆分成不同支SCSS檔，並建立一支專門引用SCSS的管理頁，以便清楚知道專案有引用那些SCSS，也利於後續管理。

甚至可進一步將常用的內容拉出，讓結構與樣式分離、內容與容器分離，提高使用上的可複用性與擴展性，此種概念即為 OOCSS，盡可能讓元件不要被限制在特定的容器下。

  • 建立all.scss

    用於管理所有SCSS分支檔

    all.scss
    1
2
3
4
5
6
    @import './breakpoint';//斷點設定
@import './base';//全站設定(tag 標籤)
@import './utilities';//工具類(margin padding 元件顏色等)
@import './components/card';//自訂元件
@import './components/arrow';
@import './components/btn';

Bootstrap 即是使用SCSS來開發與管理樣式，可透過修改Bootstrap的SCSS內檔案，來客製化屬於自己的樣式，讓切版更快速與彈性。

常見問題與觀念

  • 程式碼須先 編譯（compiled） 成 CSS 的形式，才能讓瀏覽器解讀並呈現出畫面。使用vscode時，可安裝插件來Live Sass Compiler 來進行編譯。
  • 多利用 巢狀寫法(Nesting)
  • 巢狀不要超過 四層，以免影響效能
  • 編譯過程中，是 從上到下來執行，所以需注意變數的順序