前端新米

Heidi's Blog

0%

[week 13] 前端工具之二 - CSS 預處理器、Babel

發表於 更新於 分類於 ，
文章字數： 4.8k 所需閱讀時間 ≈ 4 分鐘

本篇為 [FE201] 前端中階：那些前端會用到的工具們 這門課程的學習筆記。如有錯誤歡迎指正。

前言

在使用新工具之前，大致會依照下列步驟：

  1. 安裝工具
  2. 閱讀官方文件
  3. 更改設定檔

SASS：CSS 預處理器

在進入 CSS 預處理器之前，先談談 CSS 在開發上可能遇到哪些問題：

  • 全域會互相干擾
    • 例如：在 index.html 同時引入 main.css 和 normalize.css 可能會互相干擾，不易進行 debug 與維護
  • 沒有變數
    • 現在有 CSS Variable
  • 沒有辦法組合

因此 CSS 預處理器就誕生了，讓我們能夠以寫程式的方式處理樣式，方便進行維護。

什麼是 SASS？

SASS（Syntactically Awesome Stylesheets）/ SCSS

  • 是 CSS 預處理器，能更有結構撰寫程式碼，方便後續維護
  • 適合大型專案使用
  • SASS 無大括號；SCSS 有，因此後者和 CSS 相容
  • CSS 預處理器需另外編譯成 CSS，瀏覽器才能看得懂

    【註】SAS（Statistical Analysis System） / SPSS：統計分析系統，用來進行數據分析的軟體

SASS 提供的功能

  • 參數與結構化 CSS
    • Nesting：巢狀語法
    • Variables：變數設定
  • 模組化 CSS
    • Import
    • Extend
    • Mixin
    • Functions
  • 自動化 CSS
    • Condition
    • Loop

相關語法

  • 安裝 Sass

npm install -g sass：-g 表示在全域安裝

  • 一次性編譯

sass main.sass main.css：將 main.sass 檔編譯成 main.css

  • watch 模式

sass --watch main.sass main.css：每次存檔均會自動進行編譯

  • 壓縮功能

sass --style=compressed mais.sass main.css：通常是在開發最後才會執行

Sass 實作補充

main.css 通常由下列要素組成：

  1. utils：整理出常用的 variables（背景顏色等）和 mixins（垂直至中、對齊等樣式功能）
  2. Components：整理跨頁元件
  3. Layouts：獨立的大元件
  4. Pages
  5. 其他樣式：themes（dark mode）、vendors（bootstrap css）

巢狀與變數

  1. 巢狀語法：注意 & 前的空格
1
2
3
4
5
6
7
8
9
10
11
.section
  width: 100%
  height: 50%
  border-bottom: 1px solid #000
  padding: 2rem
  &__title
    text-align: center
  &__wrapper
    display: flex
    justify-content: center
    align-items: center

編譯結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.section {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #000;
  padding: 2rem;
}
.section__title {
  text-align: center;
}
.section__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*# sourceMappingURL=main.css.map */
  1. 變數設定：使用 $ 來命名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$primary: #0047AB
$secondary: #4D80E6
$warning: #CD5C5C
$text:#CCCCFF
$background: #eeeeee

.color
  width: 50px
  height: 50px
  margin: 10px
  background: #000
  &-primary
    background: $primary
  &-secondary
    background: $secondary
  &-warning
    background: $warning
  &-text
    background: $text
  &-background
    background: $background

編譯結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.color {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: #000;
}
.color-primary {
  background: #0047AB;
}
.color-secondary {
  background: #4D80E6;
}
.color-warning {
  background: #CD5C5C;
}
.color-text {
  background: #CCCCFF;
}
.color-background {
  background: #eeeeee;
}

/*# sourceMappingURL=main.css.map */

模組化 CSS

@import：引入檔案，用來分別進行管理

  • 例如：將變數放到 _variables.sass 統一管理，然後在 main.sass 加上 @import _variables.sass 即可引入檔案

export：繼承，處理共同樣式

  • 使用時機：可將所有相同樣式的內容合併，減少重複的行為
  • 例如：<a> 統一去除底線、制定 template
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    %btn
      padding: 1rem 2rem
      color: $background
      font-size: 1rem
      margin: 1rem
      transition: .1s

    .btn
      &-primary
        @extend %btn
      &-secondary
        @extend %btn
      &-waring
        @extend %btn

編譯結果：

1
2
3
4
5
6
7
.btn-waring, .btn-secondary, .btn-primary {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}

mixin：打包常用功能，替換局部變數

  • 使用時機：用於需重複使用到的屬性，且可帶入變數，以進行微調
  • 例如：width、height、flex-center 等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin btn
  padding: 1rem 2rem
  color: $background
  font-size: 1rem
  margin: 1rem
  transition: .1s

.btn
  &-primary
    +btn
  &-secondary
    +btn
  &-waring
    +btn

編譯結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.btn-primary {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}
.btn-secondary {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}
.btn-waring {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}

function：可回傳數值，搭配變數和 mixin 使用

  • 與 @mixin 的不同之處，在於 @function 只會回傳一個值，而 @mixin 是回傳一段CSS程式碼

Sass 自動化

loop 迴圈

  • 使用 @each 搭配 array
    • 以逗號表示 center, start, end
1
2
3
4
5
6
7
$direction-typs: center, start, end

@each $type in $direction-typs
  .flex-#{$type}
    display: flex
    justify-content: $type
    align-items: center

編譯結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: end;
  align-items: center;
}
  • 使用 @each 搭配 map
    • 在括號以 參數:值 表示 (center: center, start: flex-start, end: flex-end)
1
2
3
4
5
6
7
$direction-typs: (center: center, start: flex-start, end: flex-end)

@each $type, $value in $direction-typs
  .flex-#{$type}
    display: flex
    justify-content: $value
    align-items: center

編譯結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
  • for 迴圈
    • 使用時機：用於預先設定，或特效網站需產生密集大小值
      1
      2
      3
      @for $i from 0 through 5
          .h#{5 - $i + 1}
              font-size: 1 + 0.2rem * $i

編譯結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.h6 {
  font-size: 1rem;
}

.h5 {
  font-size: 1.2rem;
}

.h4 {
  font-size: 1.4rem;
}

.h3 {
  font-size: 1.6rem;
}

.h2 {
  font-size: 1.8rem;
}

.h1 {
  font-size: 2rem;
}

condition

有關 Flow Control 可參考官方文件。

參考資料：

  • Sass/SCSS 基本語法介紹，搞懂CSS 預處理器
  • 常用色彩表
  • SCSS 筆記(2) - extend、mixin、function

重構檔案流程

  • 步驟一：將重複的部分用巢狀方式撰寫
  • 步驟二：將顏色、字體大小，統一使用變數命名 _variables.sass
  • 步驟三：抽檔案，把重複的區塊放到 _components.sass
  • 步驟四：將分出的區塊以 @import 引入，完成後將所有檔案打包

BABEL：JS 轉譯器

BABEL 是 JavaScript 轉譯器，可將 ES6+ 程式碼轉為等效的 ES5 程式碼。

參考資料：利用 Babel 支援現代 JavaScript 的特性