N1.1_Sass 實作補充_CSS 預處理器


Posted by Christy on 2021-09-11

[FE201]_Sass 實作補充 by minw

Sass 簡介與安裝

CSS 開發上的問題:

  1. css 是全域的,會互相干擾:例如 normalize.css 會影響 main.css

  2. 沒有變數(但現在有 css variable):有變數比較方便做管理

  3. 沒有辦法組合:維護上很麻煩

為什麼要有 css 預處理器?

透過撰寫類似 css 的語言,利用預處理器編譯成瀏覽器看得懂的 css

css 後處理器是什麼?

加工既有的 css

css 預處理器跟後處理器只是使用上流程的差別而已,這兩個可以同時使用。

Sass 介紹

有三大類功能:

  1. 參數與結構化 css: nesting, variables

  2. 模組化的 css: import, extend, mixin, functions

  3. 自動化 css: condition, loop

Sass 怎麼用?

雖然編譯器名稱叫做 Sass,但它支援了兩個語法,SCSS 跟 Sass

有人覺得 SCSS 比較嚴謹,不會因為縮排容易有問題,所以可能會用在大型專案上。

在小型專案裡面,用 Sass 比較多。

開發完以後,想要壓縮 css,可以用 sass --style=compressed file1.scss file2.css,不必要的空行縮排都會不見


Sass 結構化 - 變數與巢狀

Sass 模組化 - import, extend, mixin 與 function

import:通常會開一個檔案叫做 _variables.sass 管理變數,接著把這個檔案引入到 sass 裡面,開頭寫上 @import _variables,要加不加副檔名都可以

extend:

可以用 % 先寫好一個模板:

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

mixin:很類似 extend

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

mixin 與 extend 的區別,mixin 可以帶變數,更像函式的感覺;或者把一樣常見的功能包起來(例如垂直水平置中之類的);更好的做法是開另外一個檔案 _mixin.scss

function 可以回傳數值,跟 mixin 有點像;fn 有執行順序的特性,所以記得要放在「想要引入對東西」的前面

mixin 可以用在一整組的功能底下;function 可以只用在一個功能底下

Sass 與 CSS 渲染規則

回顧 mixin 與 extend 語法上的區別

Sass 自動化 - condition 與 loop

有類似 arr or obj 的資料格式:

arr: 在這裡叫做 lists

//  arr 前面寫一個變數,後面用逗號隔開
$sizes: 40px, 50px, 80px;

//  這是用類似迴圈的概念生成下面的 css
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
//  編譯之後會長這樣
.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

obj 在這裡叫做 maps,如果想要用多個變數搭配的話,可以用 @each + maps 的形式

如果對這個有興趣的話,可以去看官網的 flow control

Sass 實戰

主要講重構 css 流程

推薦每個頁面獨立打包成一個 css 檔案比較好

要記得每做一小個階段,就檢查網頁有沒有錯誤喔

會被 import 進來的檔案,檔名前面習慣加上底線










Related Posts

學習 DNS, CDN, Cloudflare

學習 DNS, CDN, Cloudflare

HTTP 協議 / 請求&Cache / 回應&Content-Type

HTTP 協議 / 請求&Cache / 回應&Content-Type

SQL 資料處理

SQL 資料處理


Comments