iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

SASS/SCSS的認識與實作 系列

從最基礎的了解,再慢慢加深去了解實際的語法與操作,最後能將所學到的部分做出完整的實作。

參賽天數 0 天 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 0

Day21 部件化設計 (Component-based Design)

是一種將頁面或應用程式分解成獨立、可重複用的部件(components)的設計方法。每個部件都負責處理自己的一小部分功能或樣式,並且能夠被獨立開發、測試和重用...

2024-10-06 ‧ 由 yu_ting 分享
DAY 0

Day22 部件化設計例子

切分頁面並使用 SASS 管理樣式 HTML Sass// 定義變數$primary-color: #3498db; // 主色$secondary-c...

2024-10-07 ‧ 由 yu_ting 分享
DAY 0

Day23 條件語句 Conditionals

根據給定的條件來決定是否執行特定程式碼的語句 在 SASS 中,條件語句允許根據變數、運算或環境來控制樣式生成 常見的條件語句包括 @if、@else if...

2024-10-08 ‧ 由 yu_ting 分享
DAY 0

Day24 條件語句例子

根據變數動態設置字體大小$font-size: large; p {@if $font-size == small {font-size: 12px;} @...

2024-10-11 ‧ 由 yu_ting 分享
DAY 0

Day25 模塊化 SASS 架構

將 SASS 文件拆分為多個小的、可重複使用的模塊(modules),每個模塊負責單獨的功能或樣式,這樣可以讓樣式更具結構化、易於維護和重複使用 步驟:...

2024-10-11 ‧ 由 yu_ting 分享
DAY 0

Day26 模塊化 SASS 架構例子

// _button.scss.button {padding: 10px;background-color: $primary-color;border-ra...

2024-10-11 ‧ 由 yu_ting 分享
DAY 0

Day27 SASS 相關的開發工具

Prepros 功能:Prepros 是一個圖形化界面的工具,可以自動編譯 SASS,並生成對應的 CSS,它支持多種預處理器,還提供自動刷新功能 應用場...

2024-10-13 ‧ 由 yu_ting 分享
DAY 0

Day28 自動編譯

指當原程式碼發生變化時,工具能夠自動將源文件(如 .scss)轉換為目標文件(如 .css),不需要開發者手動執行編譯命令 設置自動編譯 SASS 的開...

2024-10-13 ‧ 由 yu_ting 分享
DAY 0

Day29 SASS 生成主題

生成主題的過程通常涉及到定義一組可以靈活變更的樣式變量(如顏色、字體等),並使用這些變量來應用在不同的主題中。通過修改變量的值,可以實現主題的切換 步驟...

2024-10-14 ‧ 由 yu_ting 分享

Day 30 深淺色主題實作

網頁網址: http://localhost:63342/IT/index.html?_ijt=3tnkuod6vv07orba37dro24s3m...

2024-10-15 ‧ 由 yu_ting 分享