#89 SASS/SCSS (8) 邏輯 @if, @each, @for 與 @while⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天，我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives)，它們能讓你的樣式擁有真正的「邏輯」，根據條件、迴圈來自動生成樣式，也就是所謂的： @if：如果 A 否則 B @each：處理「每一個」重複 @for：由數字跑迴圈 @while：條件成立就不斷循環 一、@if：如果 A 否則 B @if 就如同其他程式語言中的 if/else...Oct 9, 2025·1 min read·17
#88 SASS/SCSS (7) sass:color 顏色模組——color.adjust 與 color.scale 取代舊的 lighten() 和 darken()⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天我們就來學習 SASS/SCSS 中關於顏色處理的語法：sass:color 模組，他即將取代過去 SCSS 中的 lighten() 和 darken() 語法。 一、即將被棄用舊語法：lighten() 和 darken() 在過去，當我們想讓一個顏色變亮或變暗時，在 SCSS 中就是使用 lighten() 和 darken() 語法…Oct 8, 2025·1 min read·19
#87 Sass/scss (6) 運算符號（加減乘除）⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天，我們要來探索 SCSS 中一個非常實用的功能：運算符號 (Operators)，也就是加減乘除與取餘數，讓你可以在 CSS 裡面算數。 一、運算符號語法 1. SCSS 數學運算符號 SCSS 支援標準的數學運算符號…Oct 7, 2025·1 min read·8
#86 SASS/SCSS (5) Extend⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天，我們要來學一個和昨天說的 @mixin 很像，但運作原理和使用情境卻截然不同的 SCSS 功能：@extend。 一、@extend 是什麼？和 @mixin 有何不同？ @extend，字面上的意思是「擴展、延伸」。 它的核心概念是「繼承」，讓一個選擇器可以繼承另一個選擇器所有的樣式規則，並將自己「合併」到被繼承的選擇器群組中。 這聽起來跟 @mixin 有點像，都是在重用樣式碼。但它們最大的差別在...Oct 7, 2025·1 min read·3
#85 SASS/SCSS (4) Mixins @mixin & @include⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣式碼」的問題，它就是 Mixin！ 一、Mixin 是什麼？ 在寫 CSS 的過程中，你一定會遇到某些樣式組合需要不斷重複使用的情況。例如：置中一個元素的 Flexbox 寫法、寬度與高度、清除浮動的樣式，或是特定的按鈕風格等等。如果每次都手動複製貼上...Oct 6, 2025·1 min read·14
#84 SASS/SCSS (3) 使用檔案管理樣式 Partials / Modules (@use / @import / !default)⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 當專案越來越大，Code 越來越多，你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡，變得很混亂。今天，我們就要來學習如何使用 Partials 和 Modules 的概念，把我們樣式拆分到不同的檔案裡。 一、為什麼要拆分檔案？ 想像一下，一個大型網站可能有數千行的 CSS，如果全部寫在一起，光是找到你要修改的那一段，可能就要花上好幾分鐘。透過將樣式碼按功能或元件拆分成多個小檔案，例如...Oct 5, 2025·1 min read·14
