解密 CSS 處理器 SCSS/PostCSS 從把妹角度理解前後端如何和平相處

隨著 CSS 開始越來越複雜，由於 CSS 語法受限而發展出了 CSS Pre-/Post-processors (預處理和後處理) 來拓展和優化寫法。

什麼是 Preprocessor (預處理器)

CSS 預處理器是個能透過該預處理器語法，產生純 CSS 的程式。

CSS 預處理器主要有 Sass/SCSS、Stylus、Less 三種。

處理器會加入 CSS 所沒有的功能像是 mixin、巢狀選擇器、繼承選擇器等等，增加 CSS 結構的可讀性、可維護性。

預處理器可以想像成女孩子的底妝組、眼妝組等等，將相同類型的化妝品進行分類和優化增加組合搭配的方便性。

Sass/SCSS

Sass/SCSS 讓 CSS 成為真正的程式語言，這篇文章主要以 SCSS 來做介紹

• 變數使用
• 判斷/迴圈
• 巢狀結構
• @mixin/@extend

變數使用

使用定義主色調，這樣在未來需要調整主色調時速度會快很多，不用全部搜尋再取代還擔心取代錯誤。

$primary-color: #ffffff;
$second-color: #000000;

巢狀結構

巢狀結構減少重複輸入 parent 的選擇器，可以少打一些字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// CSS
.list {
  display: flex;
}

.list li {
  background-color: black;
}

.list li a {
  color: white;
}

// SCSS
.list {
  display: flex;

  li {
    background-color: black;

    a {
      color: white;
    }
  }
}

@mixin

@mixin 的做法是可以帶入變數，然後生成客製化樣式，譬如當同樣的一個版但需要套不同圖或是顏色，這樣的做法就會非常方便，mixin 搭配 [rwd 的寫法][1]

1
2
3
4
5
6
7
8
9
10

@mixin setSpecail($size, $color) {
  font-size: $size;
  color: $color;
}
.IAmSpecailOne {
  @include setSpecail(sizeOne, colorOne);
}
.IAmSpecailTwo {
  @include setSpecail(sizeTwo, colorTwo);
}

@extend

@extend 就比較單純可以當成注入性質。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

％button {
  width：80 px ;
  height：40 px ;
}

.button--primary {
  @extend  ％button ;
  background-color：white ;
}

.button--success {
  @extend  ％button ;
  background-color：green;
}
.button--error {
  @extend  ％button ;
  background-color：red;
}

什麼是 postprocessor (後處理器)

CSS 後處理器是讓 CSS 經過擴充功能 (plugin) 後製處理，這裡介紹以 PostCSS 為主。

• Autoprefixer 會協助加入跨瀏覽器支援的相關前綴詞 (prefix) -webkit-、-moz-，來源是 Can I Use
• stylelint: 語法檢查和報錯
• lost: Grid System

PostCSS 通常會和 Webpack、Grunt、Parcel、Gulp 等打包工具一起使用，可以想像成是女孩子隨時能補的 BB 霜。

後處理器著重在防呆和支援性，接下來以加入 Autoprefixer 為例，使用方法非常簡單。

1. npm install postcss postcss-loader autoprefixer precss --save-dev
2. postcss.config.js

1
2
3

module.exports = {
  plugins: [require("autoprefixer")],
};

不過還是要注意像是隱藏 Scroll Bar 這類特殊的用法還是要自己處理

1
2
3
4
5

.hide-scrollbar {
  overflow: auto;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
}

• ← 上一篇
• 下一篇 →