您好,歡迎光臨CSS甜點烘焙店 今天上架的是草莓奶油小蛋糕 蛋糕主要分成3個部份,上層草莓、中層蛋糕體,以及下層餅乾Html結構如下: .strawberryC...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是銅鑼燒 銅鑼燒主要分成3個部份,上層麵皮、中層紅豆餡、下層麵皮,看似這麼多層的層次,其實只要2層架構就可以完成喔~不...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是貝果 主要分成2部份,麵包體和上方的黑白芝麻Html架構如下: .bagel .black-sesame .wh...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是巧克力切片蛋糕 蛋糕主要分成3個部份,上層巧克力、下層蛋糕體,以及巧克力上方的奶油Html結構如下: .chocol...
Hi,大家好 我是Isha 這次藉由iT鐵人賽,想開一間甜點烘焙店,讓CSS不只是程式碼,而是可以帶著你發揮創意、實現夢想的藍圖。 30天的內容大致分為以下幾個...
主要管理CSS sass寫在.sass檔案中,但透過"編譯"的方式轉成.css檔案=>在html上還是用.css的檔名 格式: Sas...
用 meme 圖講述這一趟 30 天轉生到 Bootstrap 5 的意識界 的心境。
此篇延續上一篇元件樣式修改,此篇著重在元件的動態效果樣式。 option 參數 撰寫動態效果起手式。 $enable-reduced-motion:...
此篇會介紹如何修改 Bootstrap 元件樣式。 事前準備 須先了解變數設置、通用類別設置,再繼續閱讀會更好消化呦。 _variable.scss...
此篇會教學如何將 Bootstrap grid 格線系統,自幹一個出來。 事前準備 Gird System 格線系統基礎觀念 RWD 響應式基礎觀念...
此篇延續 Bootstrap 客製化 Sass utilities(上)最後尚未介紹的 generate-utility,解析 generate-utilit...
此篇分享著重在介紹 _variable.scss 變數介紹,以及如何客製化修改。 事前須看完Bootstrap 客製化 Sass 必備知識 有介紹許多今天...
此篇接續客製化 sass 基礎語法以及觀念下集,尚未觀看上集可以先看完再來看下集。 Operators 運算 介紹 sass 原生的 運算 功能,以往 c...
此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。 編譯 scss 註解有分為 會被編譯、不會被編譯 兩種。 寫法:// // 不...
此篇會用好理解 (好笑) 的方式導覽官網、原始碼如何閱讀,詳細介紹會放在往後的文章。 官網 英文官網 中文官網 (六角學院翻譯) 中文官網,不一定...
此篇會介紹 Bootstrap 客製化 sass 原始碼架構,著重在如何使用原始碼來客製化自己的 Bootstrap 環境。 Sass 架構 官網推薦的客...
> 此篇會介紹三種免費的 sass 編譯方法 Live Sass Compiler 這是一款免費 VSCode 插件,會自動將所有 sass、scss...
Project Structure 這篇文章我們來建立我們Sass專案的架構~ 一般Sass專案內都會有一個主要的.scss檔案,其用來負責將所有有用到的.sc...
這篇文章會講解如何將Sass分成多個檔案模組化管理,並於編譯時只會編譯到同一個css檔案內 首先,我們在專案的sass資料夾內先建立一個variables.sc...
Variables 在Sass中,開發者可以使用變數,例如可以將常用的顏色、寬度設定成變數,這樣未來如果顏色或寬度要改變時,只需要改掉變數的值,而不用像一般CS...
這篇文章簡單介紹一下Sass~ Sass 是什麼 ? Sass是一種CSS預處理器語言(CSS preprocessor),可以讓開發者使用像是變數、函式、嵌套...
今天要來安裝這次會用到的所有工具套件,並能順利將SASS編譯成CSS~ VS Code 套件 我們這次需要使用到Live Server,可以到VS Code的延...
30天轉生到 bootstrap 5 的意識界 類型 前端切版 / Sass / Bootstrap 5 這是一部講述 Bootstrap 5 世界的故事,...
【平臺研發中心】Angular/Java 研發工程師(台中) |職務說明|1、與團隊合作,開發Web端開發平台,提供全公司SaaS產品使用2、參與前後端技術方案...
今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...
這裡要先介紹為什麼要 模組化格線系統?? 因為若因 功能性命名區塊若命名為某個功能之後就不會運用在其他區塊 模組化格線 優點避免命名上的問題整體性高可用性高...
7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它 創建了一...
BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線 官網:http://getbem.c...
今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...
OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...