iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

關於我的佛系SCSS開發系列 第 25

鐵人賽25天function

  • 分享至 

  • xImage
  •  

今天連假第二天了,深深感覺到累外宿剛剛回到家,睡不習慣的地方真的會睡不好,一回到家就昏死結束又是讓我有動力爬起來的鐵人賽,終於快要結束囉,不過這次出去跟朋友吃飯,感覺時間的過的蠻快,感覺後面可能會討皮痛,來記錄轉職的心情轉換,哈離題囉我們今天就進範例來看看官網有哪些有趣範例

//編譯前
//第一個
@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

//Special Functions
//第二個
$widths: 50px, 30px, 100px;
.micro2 {
  width: min($widths...);
}
//第三個
.micro3 {
  width: max($widths...);
}

//編譯後
.micro {
  width: 180px;
}

.micro2 {
  width: 30px;
}

.micro3 {
  width: 100px;
}

@function
Special Functions

今天這個範例有三個,第一個就蠻簡單就是我們有一組px的單位,我們可以可以透過迴圈方式,回傳累加之後的結果,因為我們會去拿取資料中每一個值,做完全部的動作回傳,下面兩個用法比較有趣,就是可以利用內建已經設計好的方法直接拿到最大值跟最小值,不過這種最大最小值通常也是設計本身寫的算式是需要給其他人使用,實際我也沒用過這個方法過,如果上面有一個連結有貼一個SpecialFunctions,裡面還有url的使用,有出現差異就是url(""),編譯出來結果會怎樣不同形式,又是不知道優點在哪邊跟差異點,剩下就是calc()感覺也不是很特別功能就不另外說明,Functions比較需要就知道回傳值,自己如果在寫的時候需該怎樣設計,這一段可能會比較複雜一點。


上一篇
鐵人賽24天scss:meta
下一篇
鐵人賽26天常用的mixin
系列文
關於我的佛系SCSS開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言