iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

使用SASS(SCSS)建立自己的CSS Library 系列

30天內快速學習SASS,並建立屬於自己的CSS Library

參賽天數 21 天 | 共 21 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] Sass - Operators

Operators 今天要來介紹一下Sass的Oerators-運算功能雖然在一般的CSS中,我們可以用calc()計算寬度、高度但在Sass內支援的運算更多更...

2021-09-24 ‧ 由 zhix6842 分享
DAY 12

[Day 12] Sass - 常用的內建Modules

Math、Color Sass有提供一些內建的Modules,在寫CSS時如果能活用會有很大的幫助,這裡介紹兩個比較常用的Modules Math: math...

2021-09-25 ‧ 由 zhix6842 分享
DAY 13

[Day 13] Sass - Maps

Maps 今天要來介紹的是在Sass內非常重要而且常用的一個功能 - Maps之前有提到Maps是一種Key-Value的表示方式,活用的話可以提高程式碼的可讀...

2021-09-26 ‧ 由 zhix6842 分享
DAY 14

[Day 14] Sass - Lists

在Day10的文章中有提到,Lists是指一個變數的值由多個值組成,這些值可以用底下的幾種方式隔開 //用逗號隔開 $list_name: values, se...

2021-09-27 ‧ 由 zhix6842 分享
DAY 15

[Day 15] Sass - Loop

Hi 終於來到第15天了(一半了!!!)今天要寫的是關於Sass-Loop迴圈,迴圈很常與前幾天介紹Lists與Maps一起使用~ @for @for <...

2021-09-28 ‧ 由 zhix6842 分享
DAY 16

[Day 16] Sass - Booleans

Hi 今天的主題是有寫過任一種程式語言的人都會很熟悉的“條件判斷式”,下面會介紹 @if @else if @else @ifif後方會加上需要判斷的條件,判斷...

2021-09-29 ‧ 由 zhix6842 分享
DAY 17

[Day 17] Sass - Parent Selector

&父選擇器“&”通常與Sass的Nesting用法搭配使用,當內層的選擇器使用"&"時,它會替換為外層的選擇器。舉個...

2021-09-30 ‧ 由 zhix6842 分享
DAY 18

[Day 18] Sass - Mixins

@mixin 與 @include@mixin通常與@include一起使用,@mixin用來定義需要重複使用的樣式,@include用來將@mixin的內容涵...

2021-10-01 ‧ 由 zhix6842 分享
DAY 19

[Day 19] Sass - Functions

嗨!來到了第19天~今天要談的是Sass界的計算機 @function與@return 在規模比較大的網站中,各種樣式的數據常常會有一個固定的規則,像是字體的大...

2021-10-02 ‧ 由 zhix6842 分享
DAY 20

[Day 20] Sass - Using @extend

哈囉~今天來聊聊跟@mixin的兄弟 @extend 我們平常在寫css時,時常會把class們相同的樣式提出來,例如 .contain-btn, .wrap-...

2021-10-03 ‧ 由 zhix6842 分享