昨天學到的 List 是個簡單的列表，今天我們要來看看 SCSS 中的 Map，它有點像 json 資料。 假設專案裡有 5 個主要顏色、4 個斷點、6 種字體...
在 SASS/SCSS 中，我們已經使用變數、Mixin 和 Function 等語法來幫我們管理 CSS Code 了，但是它還是可能會亂，例如散亂的單一變數...
我們已經一路學習了 SCSS 的變數、顏色、邏輯判斷與迴圈等等，你可能已經覺得 SCSS 非常強大了。但今天，我們要來認識 SCSS 中一個更厲害的用法：Fun...
今天，我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives)，它們能讓你的樣式擁有真正的「邏輯」，根據...
今天我們就來學習 SASS/SCSS 中關於顏色處理的語法：sass:color 模組，他即將取代過去 SCSS 中的 lighten() 和 darken()...
今天，我們要來探索 SCSS 中一個非常實用的功能：運算符號 (Operators)，也就是加減乘除與取餘數，讓你可以在 CSS 裡面算數。 本篇同步發表於我...
今天，我們要來學一個和昨天說的 @mixin 很像，但運作原理和使用情境卻截然不同的 SCSS 功能：@extend。 本篇同步發表於我的 Hashnode...
好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣式...
當專案越來越大，Code 越來越多，你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡，變得很混亂。今天，我們就要來學習如何使用 Parti...
上一篇我們已經順利設定好 SASS/SCSS 的開發環境了，這次，就讓我們正式來學習 SCSS 兩個最基本也最實用的語法：變數 (Variables) 和巢狀...
我們基本 CSS 的教學與補充新語法差不多告一個段落了，接下來，我們來學一個也很常用的 CSS 進階用法：CSS 預處理器 SASS/SCSS！ 一、CSS...
今天我們要來研究一個 CSS 中相對較新、但功能強大的工具：三角函數。 沒錯，就是那些年我們在數學課上又愛又恨的 sin、cos、tan！現在，它們已經可以用...
想要 UI 出現時，不只是生硬地「出現」嗎？今天我們要來研究兩個 CSS 的新語法：@starting-style 和 transition-behavior:...
從前要用 CSS 精準地將一個元素（例如：Tooltip、下拉式選單）對齊另一個元素，總是要大費周章，甚至需要動用 JS 來計算位置。現在，CSS 推出了一個眾...
iOS 26 的液態玻璃（Liquid Glass）效果，今天我們來試試看網頁能不能做到。 這個效果的核心概念是「模糊背景」再加上「不規則扭曲」，就像透過一杯正...
以前我們介紹過用 CSS Media Queries 的 prefers-color-scheme 讓網頁打開時預設切換淺色/深色模式，但是居然沒有講到最基礎的...
你是不是也常常爲了文字上下多出來的神秘空白間距感到困擾，導致按鈕裡的文字、或是標題跟內文之間的距離怎麼調都感覺不太對勁？ 在過去，每個字型本身都會包含一些內建的...
在中文中有所謂「孤字不成行，單行不成頁」的寫作排版概念，意思是說「一個字（不含標點號）不能成為一行，一句話不能成為一頁」，因為這樣除了很醜外，也容易讓人看不懂這...
當 CSS 越寫越龐大，樣式一不小心就互相打架了，怎麼辦呢？今天，我們來學一個 CSS 的新功能：@scope，它就像是為你的 CSS 加上了結界，讓你能更精準...
在寫 CSS 時，你是否也曾對 :nth-child 又愛又恨呢？它雖然強大，但有時在較複雜的 HTML 結構中，要選到對的東西，有時就只差那麼一點點… 為了解...
上一篇我們學到了 ::before 與 ::after 的基本用法，像是輕鬆添加引號、點綴裝飾性內容、清除浮動，甚至是製作小圖示。 這次，讓我們來探索更進階的用...
之前寫的文章，雖然有提到過，但是居然沒有好好地解釋過 CSS 的偽元素（Pseudo），也就是 ::before 與 ::after。這超級實用的，怎麼能沒有呢...
你一定看過那種很酷的網頁：當你向下滾動時，背景圖片移動得比前景文字慢，或者某個元素會隨著滾動淡入、旋轉、放大，創造出引人入勝的深度和故事感。 這種效果，我們稱之...
以前，要做出輪播的「滾動吸附」的效果，十之八九都需要依賴 JS 套件（像是 fullPage.js 、Swiper.js 或 Slick.js）。這些工具雖然強...
你有沒有遇過這種情況？網頁跳出一個對話框，你想滑動看看裡面的內容，結果才滑到底，整個後面的網頁竟然也跟著動了起來！ 或是，你在手機上瀏覽一個很酷的 Web Ap...
上一篇我們提到 CSS 的 :target 的偽類，可以針對 HTML 元素是否為目標狀態而去調整樣式。所以，如果延伸想一想，有許多 UI 都是會有狀態的，其實...
昨天我們讓很長內容的滾動範圍可以用 hash 連結滑順地滾動，今天我們要進一步優化它。 當網頁內容很長，使用者滾來滾去時可能會搞不清楚目前位置，所以今天我要來用...
前幾篇我們已經學會怎麼設定 CSS 的滾動範圍，現在我們要再對滾動的操作行為做一些很簡單的設定，就是：滾動時的行為 scroll-behavior 。 本篇同...
參賽前言 今年是第三次參加鐵人賽，前兩年參加時共寫了 64 篇文章： Super Easy CSS，極度簡單（主要偏向 CSS 與前端基礎） Super...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 今天我們要來製作一個捲動提示陰影效果：在...
Eva Chen
iThome鐵人賽
看影片追技術