iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

關於SASS/SCSS系列 第 25

[DAY25]SASS數字函數

  • 分享至 

  • xImage
  •  

前情提要

之前講過很多次的顏色函數了,
今天講個不一樣的叫做數字函數。


正文

數字函數是甚麼東西

顏色函數的用意是,
你可以用不一樣的組合方式產生出不一樣的樣子,
又或者從既有的顏色當中拆出它的組合元素。
就像它內建的功能一樣,
但是還是要有顏色的概念在裡面。
它只是提供你一個更方便的方法操作它而已。

那數字函數又是怎麼一回事呢?
我們之前有說到過關於sass內建計算機的部分。
它本身就包含了對數字的運算功能,
數字函數的道理也一樣,
它內建寫好一些樣式讓使用者直接使用。
配合著特殊的寫法,
為使用者帶來更加的便利性,
每個人可以根據自己不一樣的需求決定哪個語法自己更喜歡來幫助網頁設計。

數字函數介紹跟實際操作

|Abs()函數|:
返回絕對值
()裡面放數字
https://ithelp.ithome.com.tw/upload/images/20221004/20151717Y7hKZOQcDB.png

|Min()函數|:
在一個數列取最小值
https://ithelp.ithome.com.tw/upload/images/20221004/20151717nYLsELYUWy.png

|Max()函數|:
在一個數列取最大值
https://ithelp.ithome.com.tw/upload/images/20221004/201517179GSzPP4wAg.png

|Random()函數|:
取隨機數
取隨機數的方式有兩種
1.如果()內沒有放東西那就是取0~1的一個隨機小數
2.如果()內有放limit值那就是取>0~limit之間的其中一個整數
取隨機數都要大於0
https://ithelp.ithome.com.tw/upload/images/20221004/20151717OWauDS2cxd.png

|Percentage()函數|:
把沒有單位的數轉成百分比
沒有單位很重要
https://ithelp.ithome.com.tw/upload/images/20221004/2015171724wDUoJVmB.png

|Round()函數|:
四捨五入 包含計算完的數值
https://ithelp.ithome.com.tw/upload/images/20221004/20151717w9BpSnJIOt.png

|Ceil()函數|:
無條件進位
https://ithelp.ithome.com.tw/upload/images/20221004/20151717GdEfgGLaMt.png

|Floor()函數|:
無條件捨去
https://ithelp.ithome.com.tw/upload/images/20221004/201517178IV8GWCkqZ.png


/images/emoticon/emoticon08.gif


上一篇
[DAY24]SASS 畫星星|Transform屬性|z-index圖層
下一篇
[DAY26]SASS列表函數
系列文
關於SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言