CSS on EricChung的程式勇者村

新手第七步：SCSS 入門　寫 CSS 終於不再複製貼上了！

Fri, 17 Apr 2026 00:00:00 +0000

你有沒有遇過這樣的情況：網站的主題色是 #3498db，結果整份 CSS 裡出現了四十幾次。有一天設計師說「主題色改一下」，你只能一個一個找、一個一個改，改到懷疑人生。

SCSS 就是來解決這個問題的！

1. SCSS 是什麼？

SCSS 是 CSS 的超集合（Superset），意思是：所有合法的 CSS 都是合法的 SCSS。你可以直接把 .css 檔案改名成 .scss，它還是能正常運作。

SCSS 在 CSS 的基礎上加入了：

變數 — 統一管理顏色、字體大小等重複值
巢狀（Nesting） — 讓選擇器的階層結構更清晰
Mixin — 可重複使用的樣式片段（類似函式）
繼承（Extend） — 讓選擇器共用樣式

瀏覽器看不懂 SCSS，所以寫完後需要編譯成普通的 CSS 才能使用。

2. 安裝 SCSS 編譯工具

最簡單的方式是在 VS Code 安裝 Live Sass Compiler 外掛：

打開 VS Code 的擴充功能
搜尋 Live Sass Compiler
安裝後，點擊右下角的 「Watch Sass」 按鈕
它會自動監聽你的 .scss 檔案，存檔時立刻編譯成 .css

3. 變數：統一管理設計規格

這是 SCSS 最受歡迎的功能，沒有之一。

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


// 在檔案最上方定義設計規格
$primary-color: #3498db;
$secondary-color: #2c3e50;
$font-size-base: 16px;
$border-radius: 8px;

// 之後到處使用變數
.button {
 background-color: $primary-color;
 border-radius: $border-radius;
 font-size: $font-size-base;
}

.navbar {
 background-color: $secondary-color;
}

現在要改主題色，只需要改最上面那一行 $primary-color，全站自動更新。

4. 巢狀：讓選擇器更有層次感

原生 CSS 的選擇器寫起來又臭又長：

1
2
3
4
5


/* 原生 CSS */
.navbar { background: #333; }
.navbar a { color: white; }
.navbar a:hover { color: #3498db; }
.navbar .logo { font-size: 20px; }

SCSS 可以寫成巢狀結構，一眼看出階層關係：

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


// SCSS
.navbar {
 background: #333;

 a {
 color: white;

 &:hover { // & 代表父選擇器（這裡是 a）
 color: $primary-color;
 }
 }

 .logo {
 font-size: 20px;
 }
}

& 符號代表當前的父選擇器，&:hover 就等於 .navbar a:hover。

5. Mixin：可重複使用的樣式積木

當你有一段樣式需要在多個地方使用，就把它做成 Mixin：

 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
26
27
28


// 定義一個 Mixin（像是定義函式）
@mixin flex-center {
 display: flex;
 justify-content: center;
 align-items: center;
}

// 帶參數的 Mixin
@mixin card($shadow: 0 2px 8px rgba(0,0,0,0.1)) {
 border-radius: 8px;
 padding: 20px;
 background: white;
 box-shadow: $shadow;
}

// 使用 Mixin
.hero-section {
 @include flex-center;
 height: 100vh;
}

.product-card {
 @include card;
}

.featured-card {
 @include card(0 8px 24px rgba(0,0,0,0.2)); // 自訂陰影
}

6. `@use` 與模組化：把 SCSS 拆成多個檔案

專案大了之後，一個 SCSS 檔案裝不下所有樣式。用 @use 可以把樣式拆成多個檔案管理：

1
2
3
4
5
6


styles/
├── _variables.scss // 變數
├── _mixins.scss // Mixin
├── _navbar.scss // 導覽列樣式
├── _buttons.scss // 按鈕樣式
└── main.scss // 主檔案，在這裡引入所有模組

1
2
3
4
5


// main.scss
@use 'variables';
@use 'mixins';
@use 'navbar';
@use 'buttons';

以底線 _ 開頭的檔案叫做 Partial（片段），表示這個檔案不會單獨編譯，只會被引入到其他地方使用。

7. 給新手的實戰練習

把之前寫的 CSS 改成 SCSS，感受一下整理後的清爽感：

 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
26
27
28
29
30
31
32
33
34
35
36
37
38


// _variables.scss
$primary: #3498db;
$dark: #2c3e50;
$light-bg: #f5f5f5;
$radius: 8px;

// main.scss
@use 'variables' as v;

body {
 background-color: v.$light-bg;
 font-family: Arial, sans-serif;
 padding: 40px;
}

#main-title {
 color: v.$dark;
 text-align: center;
 border-bottom: 3px solid v.$primary;
 padding-bottom: 10px;

 &:hover {
 color: v.$primary;
 }
}

.btn {
 background-color: v.$primary;
 border: none;
 border-radius: v.$radius;
 color: white;
 padding: 10px 24px;
 cursor: pointer;

 &:hover {
 opacity: 0.85;
 }
}

結語：CSS 也可以很工程化

SCSS 不是什麼高深的技術，它就是讓你寫 CSS 的方式更有組織、更好維護。對於任何需要長期維護的專案，SCSS（或類似的 CSS 預處理器）幾乎是標配。

接下來你可以做什麼？ 下一篇我們來看 Bootstrap 5——一個現成的 CSS 框架，內建幾百個元件，讓你不用從零開始，直接組出專業的版面！

準備好「偷懶」式開發了嗎？下一篇見！

新手第十六步：CodePen 入門　不用建專案，也能立刻開始寫前端！

Fri, 17 Apr 2026 00:00:00 +0000

你有沒有遇過這種情況：

只是想測一個按鈕 hover 效果，結果卻要先：

建資料夾
開 VS Code
建 index.html
建 style.css
建 script.js
再開 Live Server

明明只是想試 10 行程式，卻先花了 5 分鐘準備環境。

這時候，CodePen 就非常好用。

1. CodePen 是什麼？

CodePen 是一個線上前端編輯器，你可以直接在瀏覽器裡寫：

HTML
CSS
JavaScript

而且它會立刻幫你把結果顯示出來。

你可以把它想成：

前端版的線上遊樂場。

不用安裝、不用建專案、不用設定環境，只要打開網站就能開始寫。

2. CodePen 能做什麼？

很多新手以為 CodePen 只是「拿來玩玩看」的網站，其實它很好用。

你可以拿它來：

練習 HTML / CSS / JavaScript
測試一小段 UI 效果
做按鈕、卡片、導覽列等小元件
分享作品給別人看
收藏別人的範例，學習寫法

尤其是學前端初期，你常常不是要做整個網站，而是想先試一個小功能。
這時候 CodePen 比開一個完整專案快非常多。

3. CodePen 的畫面怎麼看？

CodePen 最常見的畫面分成四塊：

HTML 區：放結構
CSS 區：放樣式
JavaScript 區：放互動邏輯
Preview 區：即時預覽結果

這個設計很適合新手，因為你可以很清楚地看到：

HTML 負責骨架
CSS 負責外觀
JavaScript 負責互動

三者的角色分工會非常直觀。

4. 為什麼新手很適合先用 CodePen？

因為它把「環境成本」降到幾乎沒有。

剛開始學前端的人，最容易被兩件事打亂節奏：

程式本身還沒學懂
開發環境又一堆設定

CodePen 的好處就是：你可以先把注意力放在程式本身。

例如你今天只是想練：

flex
hover
addEventListener
fetch
一個小型卡片 UI

那你直接開 CodePen 寫，速度通常最快。

5. 一個最簡單的 CodePen 範例

假設你想做一個按一下就改文字的按鈕，CodePen 會很好上手。

HTML

1
2
3
4


<div class="card">
 <h1 id="title">你好，CodePen！</h1>
 <button id="change-btn">點我換文字</button>
</div>

CSS

 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
26


body {
 margin: 0;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #f4f7fb;
 font-family: Arial, sans-serif;
}

.card {
 background: white;
 padding: 32px;
 border-radius: 16px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 text-align: center;
}

button {
 border: none;
 background: #2563eb;
 color: white;
 padding: 12px 20px;
 border-radius: 10px;
 cursor: pointer;
}

JavaScript

1
2
3
4
5
6


const title = document.getElementById("title");
const button = document.getElementById("change-btn");

button.addEventListener("click", function () {
 title.textContent = "文字被改掉了！";
});

你把這三段分別貼到 CodePen 的區塊裡，就能立刻看到結果。

6. CodePen 和本地開發有什麼差別？

這點很重要。

CodePen 的優點

打開就能寫
適合做小範例
分享超方便
適合學習和展示

CodePen 的限制

不適合大型專案
檔案結構比較簡化
不像真正專案那樣有完整資料夾管理
有些套件和工具鏈整合沒那麼自由

所以你可以這樣理解：

CodePen 很適合「練習」和「展示」，但不適合拿來做完整產品。

7. 什麼時候該用 CodePen？

以下這幾種情況，CodePen 都很適合：

你想快速試一段 CSS 動畫
你想做一個小互動元件
你想把作品丟給朋友或面試官看
你看到別人的範例，想拆開研究
你想整理自己的前端練習作品集

尤其對新手來說，CodePen 最大的價值不是「很酷」，而是：

它讓你更容易開始動手寫。

8. 給新手的使用建議

如果你剛開始學前端，我會建議你這樣用：

小效果、小練習，用 CodePen
完整網站、小專案，用本地開發
做完一個好作品，再把它整理成可分享的 Pen

這樣你既能享受 CodePen 的快速，也不會忽略真正專案的開發流程。

結語：先把「開始寫」這件事變簡單

很多新手不是不會寫，而是每次開始前就先被環境搞得很累。

CodePen 的價值，就在於它把「開始動手」這件事變得非常輕。

你不用先想專案架構、不用先管 build tool，也不用先開很多檔案。
你只要專心回答一個問題：

「我現在想試什麼效果？」

這對前端學習初期非常有幫助。

接下來你可以做什麼？
下一篇我們可以接著介紹 Figma，因為當你開始會切版、做元件之後，你就會發現前端工程師幾乎一定會碰到設計稿，而 Figma 幾乎就是現在的業界標配。

準備好從寫畫面，進一步看懂設計稿了嗎？下一篇見！

新手第四步：CSS Flexbox　排版終於不再靠感覺！

Fri, 17 Apr 2026 00:00:00 +0000

上一篇學完 CSS 基礎，你已經能改顏色、換字型了。但你一定還遇過這個問題：「為什麼我要的左右並排，偏偏是上下疊在一起？！」

別崩潰，這是每個新手都會撞牆的地方。今天要學的 Flexbox 就是專門解決這件事的！

1. 為什麼需要 Flexbox？

在 Flexbox 出現之前，工程師為了做一個「垂直置中」的效果，要寫一堆奇怪的 CSS hack，有時候甚至要靠「玄學」才能對齊。

Flexbox 出現後，那些折磨人的問題全部消失了：

元素左右並排 ✅
全部垂直置中 ✅
平均分散間距 ✅
自動換行 ✅

它不是什麼新技術，現在所有主流瀏覽器都完整支援，你可以安心使用。

2. 開啟 Flexbox 只需要一行

Flexbox 的用法超直覺。你只需要在父元素（包著其他元素的那個）加上一行 CSS：

1
2
3


.container {
 display: flex;
}

就這樣，裡面的子元素就會自動變成左右並排！

HTML：

1
2
3
4
5


<div class="container">
 <div>方塊 1</div>
 <div>方塊 2</div>
 <div>方塊 3</div>
</div>

CSS：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


.container {
 display: flex;
 background-color: #f0f0f0;
 padding: 10px;
}

.container div {
 background-color: #3498db;
 color: white;
 padding: 20px;
 margin: 5px;
}

套上 display: flex 之前，三個方塊是上下堆疊的。套上之後，直接變成左右並排，就這麼簡單。

3. 最常用的 Flexbox 屬性

`justify-content`：控制「水平方向」的排列

1
2
3
4


.container {
 display: flex;
 justify-content: center; /* 置中 */
}

值	效果
`flex-start`	靠左對齊（預設）
`flex-end`	靠右對齊
`center`	水平置中
`space-between`	兩端對齊，元素之間平均留白
`space-around`	每個元素左右平均留白
`space-evenly`	所有間距完全相等

`align-items`：控制「垂直方向」的對齊

1
2
3
4
5


.container {
 display: flex;
 height: 200px;
 align-items: center; /* 垂直置中 */
}

值	效果
`stretch`	拉伸填滿容器高度（預設）
`flex-start`	靠上對齊
`flex-end`	靠下對齊
`center`	垂直置中

4. 傳說中的「垂直 + 水平置中」

這是每個新手都夢寐以求的效果，用 Flexbox 只要三行：

1
2
3
4
5
6


.container {
 display: flex;
 justify-content: center; /* 水平置中 */
 align-items: center; /* 垂直置中 */
 height: 100vh; /* 佔滿整個視窗高度 */
}

1
2
3


<div class="container">
 <p>我在正中間！</p>
</div>

以前要寫半天的效果，現在三行搞定。第一次看到這個的新手通常都會感動到不行。

5. `flex-direction`：改變排列方向

Flexbox 預設是水平排列（橫向），但你可以改成垂直：

1
2
3
4


.container {
 display: flex;
 flex-direction: column; /* 改成垂直排列 */
}

值	效果
`row`	水平排列（由左到右，預設值）
`row-reverse`	水平排列（由右到左）
`column`	垂直排列（由上到下）
`column-reverse`	垂直排列（由下到上）

6. `flex-wrap`：元素太多時自動換行

預設情況下，Flexbox 會把所有元素擠在同一行，擠到變形也不換行。加上這個屬性就能讓它自動換行：

1
2
3
4


.container {
 display: flex;
 flex-wrap: wrap; /* 滿了自動換行 */
}

這在做「卡片清單」這類版面時非常好用。

7. 給子元素的屬性：`flex`

不只是父元素，Flexbox 也讓你控制每個子元素如何佔用空間：

1
2
3
4
5
6
7


.item-a {
 flex: 1; /* 佔用剩餘空間的 1 份 */
}

.item-b {
 flex: 2; /* 佔用剩餘空間的 2 份（比 item-a 大兩倍） */
}

這讓你能輕鬆做出「側邊欄 + 主內容區」的經典網頁版面。

8. 給新手的實戰練習：做一個導覽列

導覽列（Navbar）是幾乎每個網站都有的東西，用 Flexbox 做超級適合。

HTML：

1
2
3
4
5
6
7
8
9


<nav class="navbar">
 <div class="logo">我的網站</div>
 <ul class="nav-links">
 <li><a href="#">首頁</a></li>
 <li><a href="#">關於我</a></li>
 <li><a href="#">作品集</a></li>
 <li><a href="#">聯絡我</a></li>
 </ul>
</nav>

CSS：

 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
26
27
28
29
30
31


.navbar {
 display: flex;
 justify-content: space-between; /* logo 靠左，連結靠右 */
 align-items: center; /* 垂直置中 */
 background-color: #2c3e50;
 padding: 0 40px;
 height: 60px;
}

.logo {
 color: white;
 font-size: 20px;
 font-weight: bold;
}

.nav-links {
 display: flex; /* 讓連結們水平排列 */
 list-style: none; /* 去掉圓點 */
 gap: 30px; /* 連結間距 */
 margin: 0;
 padding: 0;
}

.nav-links a {
 color: #ccc;
 text-decoration: none;
}

.nav-links a:hover {
 color: white;
}

這段程式碼就能產出一個專業感十足的導覽列，Logo 靠左、選單靠右，垂直完美置中。

結語：排版從此不靠感覺

Flexbox 是現代前端開發的必備技能。掌握了 display: flex、justify-content、align-items 這三個核心屬性，你會發現之前 90% 排版問題都能解決。

接下來你可以做什麼？ 有了 Flexbox 做排版，下一篇我們要學 JavaScript 入門——讓網頁不只是靜態的頁面，而是能「動起來」、回應使用者點擊的互動網頁！

準備好給你的網頁加上靈魂了嗎？下一篇見！

新手第三步：CSS 入門　讓你的網頁從黑白變彩色！

Thu, 16 Apr 2026 00:00:00 +0000

上一篇我們學了 HTML，做出了一個「能動但很醜」的網頁。今天我們要學 CSS，讓你的網頁從工地毛胚屋，搖身一變成精心裝潢的新家！

1. 什麼是 CSS？

CSS 的全名是 階層式樣式表（Cascading Style Sheets）。

繼續用蓋房子的比喻：

HTML 是鋼筋牆壁，決定結構在哪裡。
CSS 就是油漆、壁紙、燈光，決定每個地方長什麼樣子。

一句話總結：HTML 說「有什麼」，CSS 說「長什麼樣」。

2. CSS 怎麼接上 HTML？

你有三種方式可以把 CSS 加進網頁，新手最推薦的是 外部引入：

方法一：外部引入（最推薦）

新建一個 style.css 檔案，然後在 HTML 的 <head> 裡加一行：

1
2
3


<head>
 <link rel="stylesheet" href="style.css">
</head>

這樣 CSS 和 HTML 分開管理，最乾淨也最好維護。

方法二：直接寫在標籤裡（偶爾用）

1

<h1 style="color: red;">這是紅色標題</h1>

只適合臨時測試，正式專案不建議這樣寫，因為改起來很痛苦。

3. CSS 的基本語法長什麼樣？

CSS 的寫法超級固定，記住這個公式就對了：

1
2
3


選擇器 {
 屬性: 值;
}

實際範例：

1
2
3
4


h1 {
 color: blue;
 font-size: 32px;
}

這段 CSS 的意思是：「把所有 <h1> 標題的文字顏色設成藍色，字體大小設成 32px」。

4. 三大「選擇器」你一定要學

選擇器就是告訴 CSS「我要改的是哪個 HTML 元素」。

標籤選擇器

1
2
3


p {
 color: gray;
}

這樣會把所有 <p> 段落都變成灰色文字。

Class 選擇器（最常用）

1

<p class="highlight">這段文字很重要</p>

1
2
3
4


.highlight {
 background-color: yellow;
 font-weight: bold;
}

在 HTML 元素上加 class="名稱"，然後 CSS 用 .名稱 來選取。一個 class 可以用在很多元素上，超級靈活！

ID 選擇器

1

<div id="header">網站標題區</div>

1
2
3
4


#header {
 background-color: black;
 color: white;
}

ID 在一個頁面只能用一次，比 class 更「專屬」。

口訣記憶： 標籤選全部、class 選一類、ID 選唯一。

5. 新手最常用的 CSS 屬性

只要學會這幾個，你馬上就能把網頁整理得有模有樣：

屬性	用途	範例
`color`	文字顏色	`color: #333333;`
`background-color`	背景顏色	`background-color: #f0f0f0;`
`font-size`	字體大小	`font-size: 18px;`
`font-weight`	字體粗細	`font-weight: bold;`
`text-align`	文字對齊	`text-align: center;`
`margin`	元素外側的空白	`margin: 20px;`
`padding`	元素內側的空白	`padding: 10px;`
`border`	外框線	`border: 1px solid black;`
`width` / `height`	寬度 / 高度	`width: 100%;`

6. 最讓新手頭痛的東西：Box Model（盒子模型）

每一個 HTML 元素，在 CSS 眼中都是一個**「盒子」**。這個盒子由四層組成，從內到外分別是：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


┌─────────────────────────────┐
│ margin（外距） │
│ ┌───────────────────────┐ │
│ │ border（外框） │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding（內距） │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ （內容） │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘

content：你的文字、圖片等實際內容。
padding：內容到邊框之間的距離（像是包裝紙）。
border：盒子的外框線。
margin：這個盒子和其他盒子之間的距離（像是盒子放在桌上，和旁邊盒子的間距）。

7. 給新手的實戰練習

跟著做一次，絕對比看十遍有效！

第一步：建立 HTML 檔案 index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!DOCTYPE html>
<html>
<head>
 <title>我的 CSS 練習</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1 id="main-title">我的自我介紹</h1>
 <p class="intro">大家好，我正在學習前端開發！</p>
 <p class="intro">我的目標是做出一個超帥的個人網站。</p>
</body>
</html>

第二步：建立 CSS 檔案 style.css

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


body {
 background-color: #f5f5f5;
 font-family: Arial, sans-serif;
 padding: 40px;
}

#main-title {
 color: #2c3e50;
 text-align: center;
 border-bottom: 3px solid #3498db;
 padding-bottom: 10px;
}

.intro {
 color: #555;
 font-size: 18px;
 line-height: 1.8;
 margin: 10px 0;
}

第三步：用瀏覽器打開 index.html，看看和之前純 HTML 的差別有多大！

結語：骨架穿上衣服了！

恭喜你！你已經掌握了 CSS 最核心的觀念。現在你知道怎麼改顏色、改大小、加邊框、控制間距——這些就是網頁排版的基本功。

接下來你可以做什麼？ 現在的網頁還是「垂直堆疊」，元素一個壓一個。下一篇我們要學 CSS Flexbox，它是現代網頁排版的神器，讓你能輕鬆做出「左右並排」、「置中對齊」這些漂亮的版面！

準備好打破垂直限制了嗎？下一篇見！

CSS on EricChung的程式勇者村

新手第七步：SCSS 入門 寫 CSS 終於不再複製貼上了！

1. SCSS 是什麼？

2. 安裝 SCSS 編譯工具

3. 變數：統一管理設計規格

4. 巢狀：讓選擇器更有層次感

5. Mixin：可重複使用的樣式積木

6. @use 與模組化：把 SCSS 拆成多個檔案

7. 給新手的實戰練習

結語：CSS 也可以很工程化

新手第十六步：CodePen 入門 不用建專案，也能立刻開始寫前端！

1. CodePen 是什麼？

2. CodePen 能做什麼？

3. CodePen 的畫面怎麼看？

4. 為什麼新手很適合先用 CodePen？

5. 一個最簡單的 CodePen 範例

HTML

CSS

JavaScript

6. CodePen 和本地開發有什麼差別？

CodePen 的優點

CodePen 的限制

7. 什麼時候該用 CodePen？

8. 給新手的使用建議

結語：先把「開始寫」這件事變簡單

新手第四步：CSS Flexbox 排版終於不再靠感覺！

1. 為什麼需要 Flexbox？

2. 開啟 Flexbox 只需要一行

3. 最常用的 Flexbox 屬性

justify-content：控制「水平方向」的排列

align-items：控制「垂直方向」的對齊

4. 傳說中的「垂直 + 水平置中」

5. flex-direction：改變排列方向

6. flex-wrap：元素太多時自動換行

7. 給子元素的屬性：flex

8. 給新手的實戰練習：做一個導覽列

結語：排版從此不靠感覺

新手第三步：CSS 入門 讓你的網頁從黑白變彩色！

1. 什麼是 CSS？

2. CSS 怎麼接上 HTML？

方法一：外部引入（最推薦）

方法二：直接寫在標籤裡（偶爾用）

3. CSS 的基本語法長什麼樣？

4. 三大「選擇器」你一定要學

標籤選擇器

Class 選擇器（最常用）

ID 選擇器

5. 新手最常用的 CSS 屬性

6. 最讓新手頭痛的東西：Box Model（盒子模型）

7. 給新手的實戰練習

結語：骨架穿上衣服了！

新手第七步：SCSS 入門　寫 CSS 終於不再複製貼上了！

6. `@use` 與模組化：把 SCSS 拆成多個檔案

新手第十六步：CodePen 入門　不用建專案，也能立刻開始寫前端！

新手第四步：CSS Flexbox　排版終於不再靠感覺！

`justify-content`：控制「水平方向」的排列

`align-items`：控制「垂直方向」的對齊

5. `flex-direction`：改變排列方向

6. `flex-wrap`：元素太多時自動換行

7. 給子元素的屬性：`flex`

新手第三步：CSS 入門　讓你的網頁從黑白變彩色！