Skip to main content
Hashnode
Eva Chen | 網頁設計師下班後

Eva Chen | 網頁設計師下班後

Latest articles

  1. #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, 20251 min read21 views

  2. #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, 20251 min read19 views

  4. #86 SASS/SCSS (5) Extend

    ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天，我們要來學一個和昨天說的 @mixin 很像，但運作原理和使用情境卻截然不同的 SCSS 功能：@extend。 一、@extend 是什麼？和 @mixin 有何不同？ @extend，字面上的意思是「擴展、延伸」。 它的核心概念是「繼承」，讓一個選擇器可以繼承另一個選擇器所有的樣式規則，並將自己「合併」到被繼承的選擇器群組中。 這聽起來跟 @mixin 有點像，都是在重用樣式碼。但它們最大的差別在...

    Oct 7, 20251 min read4 views

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

    ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣式碼」的問題，它就是 Mixin！ 一、Mixin 是什麼？ 在寫 CSS 的過程中，你一定會遇到某些樣式組合需要不斷重複使用的情況。例如：置中一個元素的 Flexbox 寫法、寬度與高度、清除浮動的樣式，或是特定的按鈕風格等等。如果每次都手動複製貼上...

    Oct 6, 20251 min read14 views

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

    ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 當專案越來越大，Code 越來越多，你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡，變得很混亂。今天，我們就要來學習如何使用 Partials 和 Modules 的概念，把我們樣式拆分到不同的檔案裡。 一、為什麼要拆分檔案？ 想像一下，一個大型網站可能有數千行的 CSS，如果全部寫在一起，光是找到你要修改的那一段，可能就要花上好幾分鐘。透過將樣式碼按功能或元件拆分成多個小檔案，例如...

    Oct 5, 20251 min read14 views