iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

Web Franework -SASS/SCSS 系列

了解Web應用框架,知道SASS/SCSS的差別。

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 - 簡介

#為甚麼參加鐵人賽?今年是我第一次參加iT鐵人賽,也是老師在課堂上提到後,才知道有這麼一個自我挑戰類型的活動,而我參加這個活動的契機是在於,作為一個學習資訊相關...

2024-09-15 ‧ 由 ConnorChen 分享
DAY 2

Day 2 - 了解SASS和SCSS

今天要來跨出我的第一步:#什麼是SASS和SCSS呢?SASS(Syntactically Awesome Stylesheets)是為了讓CSS的撰寫更加高效...

2024-09-16 ‧ 由 ConnorChen 分享
DAY 3

Day 3 - 變數、嵌套

#變數、嵌套 1.變數(Variables)變數是SASS/SCSS中的主要功能之一,我們可以透過變數將重複使用的樣式值"抽象化"(意指將具...

2024-09-17 ‧ 由 ConnorChen 分享
DAY 4

Day 4 - 繼承、Mixin

#繼承 繼承是SASS和SCSS提供的一個功能,他的概念是讓一個選擇器繼承另一個選擇器的樣式,不僅可以解決樣式規則重複撰寫的問題,同時也使我們可以更方便的維護代...

2024-09-18 ‧ 由 ConnorChen 分享
DAY 5

Day 5 - SASS進階應用1

#條件判斷條件判斷是寫程式非常常用到的一種功能語法,我們可以根據不同的條件生成對應的樣式。因此這個語法特別適合應用在多樣化的設計需求,像是在網頁有不同主題時,我...

2024-09-19 ‧ 由 ConnorChen 分享
DAY 6

Day 6 - SASS進階應用2

#自定義函數自定義函數是可以讓我們自己去定義一些樣式邏輯,並且還可以根據我們的需求去進行調整,同時,自定義函數還可以接收參數,計算並返回結果,透過這個功能,我們...

2024-09-20 ‧ 由 ConnorChen 分享
DAY 7

Day 7 - 條件判斷程式碼實作

#條件判斷 $primary-color: #3498db; $secondary-color: #2ecc71; $contrast-threshold: 6...

2024-09-21 ‧ 由 ConnorChen 分享
DAY 8

Day 8 - 循環操作程式碼實作1(失敗 檢查錯誤中)

#循環操作 &colors: (primary: #3498db, secondary: #2ecc71, danger: #e74c3c); @ea...

2024-09-22 ‧ 由 ConnorChen 分享
DAY 9

Day 9 - 循環操作程式碼實作2(成功!!!)

#成功生成最終的CSS .button-primary-1{ background-color: #3498db; font-size: 18p...

2024-09-23 ‧ 由 ConnorChen 分享
DAY 10

Day 10 - SASS輸出風格

#SASS的輸出風格SASS有支援許多種不同的輸出風格,我們可以透過這些風格來選擇如何格式化生成的CSS代碼。我們可以根據使用的環境的不同,變換不同的輸出風格,...

2024-09-24 ‧ 由 ConnorChen 分享