iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
自我挑戰組

Web Franework -SASS/SCSS系列 第 6

Day 6 - SASS進階應用2

  • 分享至 

  • xImage
  •  

#自定義函數
自定義函數是可以讓我們自己去定義一些樣式邏輯,並且還可以根據我們的需求去進行調整,同時,自定義函數還可以接收參數,計算並返回結果,透過這個功能,我們可以封裝一些通用的樣式,然後使用在不同的地方。

#內建函數
SASS有提供許多的內建函數,讓我們可以更方便的處理常見的樣式需求,包含色彩的變更、數學的運算和字串的處理等等。
1.色彩變更函數:
這算是滿常用到的函數,我們可以透過這個函數去調整顏色。
Ex: lighten($color, &amount):使顏色變亮, darken($color, &amount):使顏色變暗
2.數學運算函數:
這也是滿常用到的函數,使我們很方便的處理像素、百分比和字體大小等等。
Ex: percentage(&value):將一數值轉成百分比, round(&value):將一數值四捨五入
3.字串處理函數:
透過這個函數,我們可以靈活的組合、操作字串。
Ex: to-upper-case(&string):將字串轉大寫,
to-lower-case(&string):將字串轉小寫

今天的SASS進階應用2就到這邊,如有錯誤,歡迎指證。
加油!!!


上一篇
Day 5 - SASS進階應用1
下一篇
Day 7 - 條件判斷程式碼實作
系列文
Web Franework -SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言