iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0
自我挑戰組

sass&css 30天學習日誌系列 第 25

SASS : for應用- Grid網格

sass for迴圈有兩種 :

@for $var from <start> through <end> //從start開始到end結束
@for $var from <start> to <end> //從start開始,碰到end就結束

1.@for $var from through

如下圖,意思就是從整個循環都跑一遍
$i的變數帶入變數1~4到裡面的Class中CSS的設定
#{ } 意思為轉為css可用的數值,詳細可看 https://ithelp.ithome.com.tw/articles/10204325

所以css結果就是跑到width-4

https://ithelp.ithome.com.tw/upload/images/20200412/201073218iWXlEPCJn.png

2.@for $var from to

如下圖,意思就是從1開始碰到4就結束,所以沒有套用到4
$i的變數帶入變數1~3到裡面的Class中CSS的設定

所以css結果就是只跑到width-3

https://ithelp.ithome.com.tw/upload/images/20200412/20107321CHehK0OpxA.png

也因此大部分使用sass的for迴圈都是使用 @for $var from through

使用form throught來建立grid網格

HTML

https://ithelp.ithome.com.tw/upload/images/20200412/20107321RX3EDep17f.png

SCSS

01.設定要建立多少網格,並給予變數$grid-columns

02.建立 for 迴圈 @for $var from through

2a. 迴圈次數 : 從1到 $grid-columns結束 ,在此為12
2b. $i的變數帶入變數1 ~ 12到裡面的Class中CSS的設定
2c. 寬度運算 : $i / $grid-columns(網格總數),運算結果使用perecentage function轉為%

perecentage function
http://sass-lang.com/documentation/Sass/Script/Functions.html#percentage-instance_method

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200412/20107321ijhTn4uRVF.png

CSS

https://ithelp.ithome.com.tw/upload/images/20200412/20107321OWzHGKH0GX.png

03.設置class細節

3a. 使用[class^='col-']:意思是col開頭的class就使用裡面的樣式
3b. box-sizing:在此為border內距和邊框不會增加col-的寬度

名詞說明:
[class^='col-'] https://stackoverflow.com/questions/20322740/odd-css-syntax-class-icon-class-icon
box-sizing http://zh-tw.learnlayout.com/box-sizing.html
rem https://ithelp.ithome.com.tw/articles/10205870

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200412/20107321UEZ0XST5MQ.png

網頁畫面

https://ithelp.ithome.com.tw/upload/images/20200412/20107321V1K2QlEtnk.png

3c.使用偽元素+for迴圈增加文字
在for迴圈內裡面的.col增加偽元素內容,顯示數字

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200412/20107321ixc9hi2dcQ.png

網頁畫面

https://ithelp.ithome.com.tw/upload/images/20200412/20107321SNqXlWpaiy.png

文章取材來源:

https://www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html
http://thesassway.com/intermediate/if-for-each-while#for

程式碼參考:

https://codepen.io/mirisuzanne/pen/PbweNj


上一篇
SASS : Function應用-單位轉換
下一篇
SASS : if else應用- border radius
系列文
sass&css 30天學習日誌30

尚未有邦友留言

立即登入留言