OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...
在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時，有UI design跟design吵，自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...
今天要來介紹 Sass Mixin那究竟什麼是 Mixin呢??簡單來說Mixin能幫你記住 css技巧讓你不用再因回想原理而去google(把它想像成一個包裝...
常用於卡片結構中，保持每張卡片，避免內文段落有長有短，造成每張卡片高度不一致 .test { display: -webkit-box; /* 限制文本 *...
在應用規模增長的過程中，性能優化始終是前端工程師需要解決的重要課題。上篇文章中，我們討論了如何使用自訂日誌系統來提升應用效率。而今天，我們將進一步探討通過 La...
繼鐵人賽後，想把自己再推前進一點，在 30 天的陶冶後，發現每天撥一點時間思考與撰寫程式，可以提升對於程式的熟悉感，並可以爬梳自己所理解的東西，就算可能當下不了...
寫到這裡，大家應該會發現，Bootstrap雖然方便，但是許多功能都已經寫死，導致我們無法更動一些小細節，因此我們在這裡會教大家，如何改寫Bootstrap的原...
Sass 我們應該大部分的人都有聽過那它到底是什麼東西呢??我們先來介紹它到底是啥 維基百科https://zh.wikipedia.org/wiki/Sass...
在上一篇文章中，我們介紹了如何使用 React Router 實現頁面導航，並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天，我們將進一步學習如何從零開...
學完了SCSS基本語法，馬上就是現學現賣的時間！一樣叫出我們To Do List的css表重新改寫（現在回頭來看…真是慘不忍睹） 在Vue專案加入SCSS 上網...
Hi，昨天說到了 CSS 的使用，今天接續昨天的內容，我們要使用 SCSS 的機制現有的 CSS 架構進行調整，那麼讓我們開始吧 SCSS 是什麼呢？ 昨天有稍...
經過這兩天的實作洗禮，發現自己卡在css上的時間遠比想像來的久。為了加速開發，今天我們來探討css預處理器—Sass，看看是否能幫我突破困境！ 什麼是CSS預處...
在前幾篇文章中，我們探討了如何透過動畫、SVG 操作以及 Tooltip 來提升網站的互動性和視覺效果。然而，隨著使用者透過不同裝置訪問網站，響應式設計已成為現...
在前兩篇文章中，我們深入探討了如何設計一個靈活、高效的 React 按鈕元件，還有助於在不同情境下保持一致的設計風格。今天，我們將這些按鈕設計應用到 Hero...
今天，我們要來探索 SCSS 中一個非常實用的功能：運算符號 (Operators)，也就是加減乘除與取餘數，讓你可以在 CSS 裡面算數。 本篇同步發表...
在 SCSS 中，巢狀規則（Nesting）是讓 CSS 語法更加結構化的一個重要特性。巢狀語法允許開發者根據 HTML 的層次結構，將相關的樣式規則寫在一起，...
今天我們就來學習 SASS/SCSS 中關於顏色處理的語法：sass:color 模組，他即將取代過去 SCSS 中的 lighten() 和 darken(...
我們已經了解了 SASS/SCSS 的所有主要功能了，不過「我要如何確保別人（或未來的自己）不會用錯我寫的工具？」這是當 Mixin 和 Function 變...
昨天學到的 List 是個簡單的列表，今天我們要來看看 SCSS 中的 Map，它有點像 json 資料。 假設專案裡有 5 個主要顏色、4 個斷點、6 種字...
參賽前言 今年是第三次參加鐵人賽，前兩年參加時共寫了 64 篇文章： Super Easy CSS，極度簡單（主要偏向 CSS 與前端基礎） Super...
我們已經一路學習了 SCSS 的變數、顏色、邏輯判斷與迴圈等等，你可能已經覺得 SCSS 非常強大了。但今天，我們要來認識 SCSS 中一個更厲害的用法：Fu...
今天，我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives)，它們能讓你的樣式擁有真正的「邏輯」，根...
上一篇我們已經順利設定好 SASS/SCSS 的開發環境了，這次，就讓我們正式來學習 SCSS 兩個最基本也最實用的語法：變數 (Variables) 和巢狀...
好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣...
在 SASS/SCSS 中，我們已經使用變數、Mixin 和 Function 等語法來幫我們管理 CSS Code 了，但是它還是可能會亂，例如散亂的單一變...
今天，我們要來學一個和昨天說的 @mixin 很像，但運作原理和使用情境卻截然不同的 SCSS 功能：@extend。 本篇同步發表於 我的部落格 一...
我們基本 CSS 的教學與補充新語法差不多告一個段落了，接下來，我們來學一個也很常用的 CSS 進階用法：CSS 預處理器 SASS/SCSS！ 本篇同步...
當專案越來越大，Code 越來越多，你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡，變得很混亂。今天，我們就要來學習如何使用 Part...
昨天學了SASS的基本功能（變數、巢狀），今天來看看三個實用的技巧： 1.Mixin–可重複使用的樣式組合 2.繼承(Extend)–共用現有樣式 3.運算(O...
Otto_auto
carolcheng
ThisIsFrankTsai
ivytien
hipposcott
Eva Chen
tina_0311_
iThome鐵人賽
看影片追技術