iT邦幫忙

sass相關文章
共有 198 則文章
鐵人賽 自我挑戰組 DAY 5
CSS甜點烘焙店 系列 第 5

技術 【草莓奶油小蛋糕】不得不說box-shadow真的好用無極限

您好,歡迎光臨CSS甜點烘焙店 今天上架的是草莓奶油小蛋糕 蛋糕主要分成3個部份,上層草莓、中層蛋糕體,以及下層餅乾Html結構如下: .strawberryC...

鐵人賽 自我挑戰組 DAY 4
CSS甜點烘焙店 系列 第 4

技術 【銅鑼燒】多啦A夢最愛的甜點,只用了3層架構就做完

您好,歡迎光臨CSS甜點烘焙店 今天上架的是銅鑼燒 銅鑼燒主要分成3個部份,上層麵皮、中層紅豆餡、下層麵皮,看似這麼多層的層次,其實只要2層架構就可以完成喔~不...

鐵人賽 自我挑戰組 DAY 3
CSS甜點烘焙店 系列 第 3

技術 【貝果】這是...?!好啦~這次最滿意的應該是芝麻的部份惹

您好,歡迎光臨CSS甜點烘焙店 今天上架的是貝果 主要分成2部份,麵包體和上方的黑白芝麻Html架構如下: .bagel .black-sesame .wh...

鐵人賽 自我挑戰組 DAY 2
CSS甜點烘焙店 系列 第 2

技術 【巧克力切片蛋糕】簡單好用的clip-path,直接畫出你想要的形狀

您好,歡迎光臨CSS甜點烘焙店 今天上架的是巧克力切片蛋糕 蛋糕主要分成3個部份,上層巧克力、下層蛋糕體,以及巧克力上方的奶油Html結構如下: .chocol...

鐵人賽 自我挑戰組 DAY 1
CSS甜點烘焙店 系列 第 1

技術 CSS甜點烘焙店-30天內容介紹

Hi,大家好 我是Isha 這次藉由iT鐵人賽,想開一間甜點烘焙店,讓CSS不只是程式碼,而是可以帶著你發揮創意、實現夢想的藍圖。 30天的內容大致分為以下幾個...

技術 Sass

主要管理CSS sass寫在.sass檔案中,但透過"編譯"的方式轉成.css檔案=>在html上還是用.css的檔名 格式: Sas...

鐵人賽 自我挑戰組 DAY 30

技術 第 30 集:Bootstrap 客製化秘技

用 meme 圖講述這一趟 30 天轉生到 Bootstrap 5 的意識界 的心境。

鐵人賽 自我挑戰組 DAY 29

技術 第 29 集:Bootstrap 客製化 component 元件樣式

此篇延續上一篇元件樣式修改,此篇著重在元件的動態效果樣式。 option 參數 撰寫動態效果起手式。 $enable-reduced-motion:...

鐵人賽 自我挑戰組 DAY 28

技術 第 28 集:Bootstrap 客製化 component 元件樣式

此篇會介紹如何修改 Bootstrap 元件樣式。 事前準備 須先了解變數設置、通用類別設置,再繼續閱讀會更好消化呦。 _variable.scss...

鐵人賽 自我挑戰組 DAY 23

技術 第 23 集:Bootstrap 客製化 Grid 格線系統

此篇會教學如何將 Bootstrap grid 格線系統,自幹一個出來。 事前準備 Gird System 格線系統基礎觀念 RWD 響應式基礎觀念...

鐵人賽 自我挑戰組 DAY 22

技術 第 22 集:Bootstrap 客製化 utilities(下)

此篇延續 Bootstrap 客製化 Sass utilities(上)最後尚未介紹的 generate-utility,解析 generate-utilit...

鐵人賽 自我挑戰組 DAY 20

技術 第 20 集:Bootstrap 客製化 Sass variable

此篇分享著重在介紹 _variable.scss 變數介紹,以及如何客製化修改。 事前須看完Bootstrap 客製化 Sass 必備知識 有介紹許多今天...

鐵人賽 自我挑戰組 DAY 19

技術 第 19 集:Bootstrap 客製化 Sass 必備知識(下)

此篇接續客製化 sass 基礎語法以及觀念下集,尚未觀看上集可以先看完再來看下集。 Operators 運算 介紹 sass 原生的 運算 功能,以往 c...

鐵人賽 自我挑戰組 DAY 18

技術 第 18 集:Bootstrap 客製化 Sass 必備知識(上)

此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。 編譯 scss 註解有分為 會被編譯、不會被編譯 兩種。 寫法:// // 不...

鐵人賽 自我挑戰組 DAY 17

技術 第 17 集:Bootstrap 客製化 Sass 官網資源

此篇會用好理解 (好笑) 的方式導覽官網、原始碼如何閱讀,詳細介紹會放在往後的文章。 官網 英文官網 中文官網 (六角學院翻譯) 中文官網,不一定...

鐵人賽 自我挑戰組 DAY 14

技術 第 14 集:Bootstrap 客製化 Sass 原始碼架構

此篇會介紹 Bootstrap 客製化 sass 原始碼架構,著重在如何使用原始碼來客製化自己的 Bootstrap 環境。 Sass 架構 官網推薦的客...

鐵人賽 自我挑戰組 DAY 12

技術 第 12 集:Sass 編譯環境

> 此篇會介紹三種免費的 sass 編譯方法 Live Sass Compiler 這是一款免費 VSCode 插件,會自動將所有 sass、scss...

鐵人賽 Modern Web DAY 7

技術 [Day 07] Sass - Project Structure

Project Structure 這篇文章我們來建立我們Sass專案的架構~ 一般Sass專案內都會有一個主要的.scss檔案,其用來負責將所有有用到的.sc...

鐵人賽 Modern Web DAY 6

技術 [Day 06] Sass - Partials

這篇文章會講解如何將Sass分成多個檔案模組化管理,並於編譯時只會編譯到同一個css檔案內 首先,我們在專案的sass資料夾內先建立一個variables.sc...

鐵人賽 Modern Web DAY 5

技術 [Day 05] Sass - Variables

Variables 在Sass中,開發者可以使用變數,例如可以將常用的顏色、寬度設定成變數,這樣未來如果顏色或寬度要改變時,只需要改掉變數的值,而不用像一般CS...

鐵人賽 Modern Web DAY 4

技術 [Day 04] Sass - 簡介

這篇文章簡單介紹一下Sass~ Sass 是什麼 ? Sass是一種CSS預處理器語言(CSS preprocessor),可以讓開發者使用像是變數、函式、嵌套...

鐵人賽 Modern Web DAY 3

技術 [Day 03] 環境建置(二) - gulp、compiling SASS

今天要來安裝這次會用到的所有工具套件,並能順利將SASS編譯成CSS~ VS Code 套件 我們這次需要使用到Live Server,可以到VS Code的延...

鐵人賽 自我挑戰組 DAY 1

技術 第 1 集:轉生到 Bootstrap 5 世界

30天轉生到 bootstrap 5 的意識界 類型 前端切版 / Sass / Bootstrap 5 這是一部講述 Bootstrap 5 世界的故事,...

徵才 【鼎新電腦】Angular/ Java 研發工程師(台中) 招募中!

【平臺研發中心】Angular/Java 研發工程師(台中) |職務說明|1、與團隊合作,開發Web端開發平台,提供全公司SaaS產品使用2、參與前後端技術方案...

技術 格線系統(2) DAY44

今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...

技術 格線系統(1) DAY43

這裡要先介紹為什麼要 模組化格線系統?? 因為若因 功能性命名區塊若命名為某個功能之後就不會運用在其他區塊 模組化格線 優點避免命名上的問題整體性高可用性高...

技術 7+1 Sass 設計模式 DAY42

7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它 創建了一...

技術 BEM 基礎介紹 DAY41

BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線 官網:http://getbem.c...

技術 CSS 命名基礎介紹 DAY40

今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...

技術 OOCSS 基礎介紹 DAY39

OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...