iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

Super Easy CSS,極度簡單 PART 3!讓想像躍然於螢幕之上 系列

今年依然希望能挑戰成功,真真正正地完結他!

本系列文章目標延續去年的目標:學習 CSS 基本知識,並且研究 CSS 中酷炫又令人期待新屬性,讓想要學習 CSS 的人也能一起學到新知識,不用再零零散散地去爬文搜尋。此外,這次將會學習 CSS 預處理器 SASS/SCSS 與了解各大 CSS 框架,讓新手對於前端開發有全面的認識。

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 21

#84 SASS/SCSS (3) 使用檔案管理樣式 Partials / Modules (@use / @import / !default)

當專案越來越大,Code 越來越多,你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡,變得很混亂。今天,我們就要來學習如何使用 Parti...

2025-10-05 ‧ 由 Eva Chen 分享
DAY 22

#85 SASS/SCSS (4) Mixins @mixin & @include

好的,我們已經學會了如何用變數來管理重複的數值,以及如何用 Partials 來組織我們的檔案結構。現在,我們要來學習一個更強大的功能,解決「重複撰寫一大段樣式...

2025-10-06 ‧ 由 Eva Chen 分享
DAY 23

#86 SASS/SCSS (5) Extend

今天,我們要來學一個和昨天說的 @mixin 很像,但運作原理和使用情境卻截然不同的 SCSS 功能:@extend。 本篇同步發表於我的 Hashnode...

2025-10-07 ‧ 由 Eva Chen 分享
DAY 24

#87 SASS/SCSS (6) 運算符號(加減乘除)

今天,我們要來探索 SCSS 中一個非常實用的功能:運算符號 (Operators),也就是加減乘除與取餘數,讓你可以在 CSS 裡面算數。 本篇同步發表於我...

2025-10-08 ‧ 由 Eva Chen 分享
DAY 25

#88 SASS/SCSS (7) sass:color 顏色模組——color.adjust 與 color.scale 取代舊的 lighten() 和 darken()

今天我們就來學習 SASS/SCSS 中關於顏色處理的語法:sass:color 模組,他即將取代過去 SCSS 中的 lighten() 和 darken()...

2025-10-09 ‧ 由 Eva Chen 分享
DAY 26

#89 SASS/SCSS (8) 邏輯 @if, @each, @for 與 @while

今天,我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives),它們能讓你的樣式擁有真正的「邏輯」,根據...

2025-10-10 ‧ 由 Eva Chen 分享
DAY 27

#90 SASS/SCSS (9) 函式 (Function) - 打造你自己的工具箱

我們已經一路學習了 SCSS 的變數、顏色、邏輯判斷與迴圈等等,你可能已經覺得 SCSS 非常強大了。但今天,我們要來認識 SCSS 中一個更厲害的用法:Fun...

2025-10-11 ‧ 由 Eva Chen 分享
DAY 28

#91 SASS/SCSS (10) 資料結構 List (列表)

在 SASS/SCSS 中,我們已經使用變數、Mixin 和 Function 等語法來幫我們管理 CSS Code 了,但是它還是可能會亂,例如散亂的單一變數...

2025-10-12 ‧ 由 Eva Chen 分享
DAY 29

#92 SASS/SCSS (11) 資料結構 Map

昨天學到的 List 是個簡單的列表,今天我們要來看看 SCSS 中的 Map,它有點像 json 資料。 假設專案裡有 5 個主要顏色、4 個斷點、6 種字體...

2025-10-13 ‧ 由 Eva Chen 分享
DAY 30

#93 SASS/SCSS (12) 防呆與偵錯 @debug / @warn / @error

我們已經了解了 SASS/SCSS 的所有主要功能了,不過「我要如何確保別人(或未來的自己)不會用錯我寫的工具?」這是當 Mixin 和 Function 變得...

2025-10-14 ‧ 由 Eva Chen 分享