我們已經了解了 SASS/SCSS 的所有主要功能了,不過「我要如何確保別人(或未來的自己)不會用錯我寫的工具?」這是當 Mixin 和 Function 變得...
昨天學到的 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...
昨天學了SASS的基本功能(變數、巢狀),今天來看看三個實用的技巧: 1.Mixin–可重複使用的樣式組合 2.繼承(Extend)–共用現有樣式 3.運算(O...
參賽前言 今年是第三次參加鐵人賽,前兩年參加時共寫了 64 篇文章: Super Easy CSS,極度簡單(主要偏向 CSS 與前端基礎) Super...
常用於卡片結構中,保持每張卡片,避免內文段落有長有短,造成每張卡片高度不一致 .test { display: -webkit-box; /* 限制文本 *...
學完了SCSS基本語法,馬上就是現學現賣的時間!一樣叫出我們To Do List的css表重新改寫(現在回頭來看…真是慘不忍睹) 在Vue專案加入SCSS 上網...
經過這兩天的實作洗禮,發現自己卡在css上的時間遠比想像來的久。為了加速開發,今天我們來探討css預處理器—Sass,看看是否能幫我突破困境! 什麼是CSS預處...
在前幾篇文章中,我們探討了如何透過動畫、SVG 操作以及 Tooltip 來提升網站的互動性和視覺效果。然而,隨著使用者透過不同裝置訪問網站,響應式設計已成為現...
在前兩篇文章中,我們深入探討了如何設計一個靈活、高效的 React 按鈕元件,還有助於在不同情境下保持一致的設計風格。今天,我們將這些按鈕設計應用到 Hero...
在 SCSS 中,巢狀規則(Nesting)是讓 CSS 語法更加結構化的一個重要特性。巢狀語法允許開發者根據 HTML 的層次結構,將相關的樣式規則寫在一起,...
在上一篇文章中,我們介紹了如何使用 React Router 實現頁面導航,並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天,我們將進一步學習如何從零開...
在應用規模增長的過程中,性能優化始終是前端工程師需要解決的重要課題。上篇文章中,我們討論了如何使用自訂日誌系統來提升應用效率。而今天,我們將進一步探討通過 La...
Hi,昨天說到了 CSS 的使用,今天接續昨天的內容,我們要使用 SCSS 的機制現有的 CSS 架構進行調整,那麼讓我們開始吧 SCSS 是什麼呢? 昨天有稍...
寫到這裡,大家應該會發現,Bootstrap雖然方便,但是許多功能都已經寫死,導致我們無法更動一些小細節,因此我們在這裡會教大家,如何改寫Bootstrap的原...
在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時,有UI design跟design吵,自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...
今天工作期間有遇到一個問題:因公司是醫療體系,所以系統裡有很多病患的名字,而人的名字就會有一些特殊的字。當時公司的解決辦法就是建了自己的造字,並一直沿用到現在,...
開發環境架設(一) : Bootstrap 核心、SCSS架構 每日一談 嗨,大家好 ! 我是阿蘇到了第20天啦 ,剩下的天數都會來分享關於正式開發 Side...
Day 17 - 開發小知識(一) : Css reset、SASS/SCSS 每日一談 嗨,大家好 ! 我是阿蘇今天是 Day17 , 來分享再正式開發我...
鐵人賽 Day6 自己做一個價值幾十萬的動態網站 第六課:實作useState與完成在SearchBar的彈跳視窗上part2 利用useState製作彈跳視窗...
鐵人賽 Day5 自己做一個價值幾十萬的動態網站 第五課:了解useState與完成在SearchBar與其介面上part1 前情提要,前兩天Day3~4我們完...