iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

菜鳥30日自學SASS及SCSS 系列

主要介紹SASS及SCSS的基本語法

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

【D-1】前言導讀

參賽動機: 在即將升上大三的暑假,原以為可以利用暑假稍稍放縱一下自己,沒想到收到了系上老師的推廣而讓我知道了IT邦的鐵人賽。想想自己暑假也是有些許時間可以花心力...

2022-09-11 ‧ 由 Minyeeee 分享
DAY 2

【D-2】CSS預處理器

淺談CSS 從 CSS 發表到現在,一直都被認為是用來定義樣式屬性與排版並撰寫網頁樣式的語言,儘管 CSS 行行單純的屬性描述讓人覺得簡單易懂,但近年來隨著網頁...

2022-09-12 ‧ 由 Minyeeee 分享
DAY 3

【D-3】什麼是Sass? 什麼是Scss?

SASS (英文全名:Syntactically Awesome Stylesheets)(羅馬拼音:薩斯) 在2007年誕生的 Sass 是最早最大也最成...

2022-09-13 ‧ 由 Minyeeee 分享
DAY 4

【D-4】SASS與SCSS 差別?

SASS 不寫大括號 { } 、不寫分號 ; 縮排語法。縮進取代大括號 { }(所以縮排相當重要、不可空錯) 不兼容CSS 文件擴展名為“.sass”...

2022-09-14 ‧ 由 Minyeeee 分享
DAY 5

【D-5】建立Sass/SCSS編譯環境

附上官網供各位參考官網:Sass: Syntactically Awesome Style Sheets 新手若是想玩看看SASS也可以先使用線上編輯器哦...

2022-09-15 ‧ 由 Minyeeee 分享
DAY 6

【D-6】 Sass/SCSS 基本語法-變數(1)

變數 Variables 變數以美元符號($)作為開頭、以冒號(:)作為賦值。 使用變數能夠減少重複寫的屬性樣式,也能更方便維護修改程式碼。例如今天有200...

2022-09-16 ‧ 由 Minyeeee 分享
DAY 7

【D-7】Sass/SCSS 基本語法-變數(2)

變數資料類型有以下幾種:(較常用的為前三點)1.數字 $num: 2; $numsize: 16px; 2.字符串:可以有引號或沒有引號的字符串 $word...

2022-09-17 ‧ 由 Minyeeee 分享
DAY 8

【D-8】Sass/SCSS 基本語法-巢狀

巢狀結構 Nesting 使用 & 符號來引用父選擇器。(需注意縮排寫法) 在另一個規則中宣告新規則時,它就稱為巢狀。一般CSS需要重複寫許多父元素...

2022-09-18 ‧ 由 Minyeeee 分享
DAY 9

【D-9】Sass/SCSS 基本語法- 混入

混入 Mixins 將經常被重複使用的程式碼獨立撰寫,以指令 @mixin 宣告,並以指令 @include 呼叫,根據不同參數來設定相似的樣式。 @mixin...

2022-09-19 ‧ 由 Minyeeee 分享
DAY 10

【D-10】Sass/SCSS 基本語法- 繼承(1)

繼承 Extent/Inderitance 繼承:可以將某個元素設定的參數複製到另一個元素。使用 % 佔位符號宣告,將所有相同樣式內容合併,再以 @extend...

2022-09-20 ‧ 由 Minyeeee 分享