iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

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

SASS : Function 與 數值設定

使用css一定會時常會依照各種需求調整寬度和高度,每次一個個去要找相關數值都很不方便,例如改產品欄位間距,旁邊的側邊欄位或是圖片欄位也要微調

在sass中可用function產生這些數值,讓相關數值一次搞定,並從中學到程式邏輯觀念

例如:下圖的兩個btn的padding數值分別是10和15,相差1.5倍 ,傳統都是手動去調整數值

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

基本原理

使用function,流程如下:

1.給予「變數」設定基礎數值,也就是1倍時為10px

$baseLineHeight : 10px;

2.給予function名稱,讓scss可套用

@function padding(){
}

3.function內新增參數並設定預設值

$count: 1

4.function內設定運算公式

@return $變數 * $參數;

綜合起來如下:

$baseLineHeight : 10px; //變數

@function + function名稱 + ( $參數:  1) {
  @return $變數 * $參數
}

//小括弧內為參數,在此為$變數:  1 , 1 為預設值

5.引入function

最後在css樣式中使用function,在此範例中用法如下:

css樣式: function名稱(參數)

結果如下圖:

css編譯後,padding數值跟上圖scss是一樣的結果

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

修改「變數」的數值

假設之後依照需求要把按鈕變大,只要改「變數」的數值,就能全部都修改到
下圖示把「變數」改為12px,右方編譯後的css padding就改為 12px 和 18px (12*1.5倍)

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

樣式內的數值

1.樣式內不放數值,以預設值為主,在此為1

https://ithelp.ithome.com.tw/upload/images/20200412/201073211FZRcG5nxz.png

2.改function「參數」內的預設值

下圖改「參數」內的預設值,下方padding內的倍值沒改,結果padding是
btn_form: 12px
btn_form2: 18px
他還是以「變數」的數值為主,不會因為預設倍率更改而有所變化

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

funtion接多個參數

funcion後面可接多個參數,例如把「變數」放在裡面
結果如下圖:

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

然後在樣式內,填上新增樣式的數值

padding(1.5 ,12px)

結果就是依照小括弧裡面的12px乘上1.5倍等於18,修改css的彈性提高

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

文章取材來源: Alex 宅幹嘛 - 從 CSS 到 SASS (SCSS) 超入門觀念引導


上一篇
SASS : extend繼承
下一篇
SASS : extend與mixin差異
系列文
sass&css 30天學習日誌30

尚未有邦友留言

立即登入留言