iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
Modern Web

關於SASS/SCSS系列 第 26

[DAY26]SASS列表函數

  • 分享至 

  • xImage
  •  

前情提要

講過好多天的函數了,
今天我們就直接進入主題吧!!
是*列表函數


正文

列表函數

|列表是甚麼??|
列表就是清單的意思,
按照列清單的方式,
清單裡面的內容物不一定都是相同的格式或是樣式。
宣告的方式跟變數一樣,非常方便。

|列表函數|
也跟之前介紹過的一樣,
列表函數就是一些內建寫好的功能,
去讀取列表資訊或是更多增刪查改的動作。

實際操作時間

|Length()函數|:
計算()內有幾個標籤值

  • 列表的長度值
  • 列表之間用空格隔開不能用逗號,否則會不能編譯
  • 列表的內容物不一定要相似,有無單位,長短都無所謂
    https://ithelp.ithome.com.tw/upload/images/20221006/2015171794X8PSfpH5.png

|Nth()函數|:

  • 列出列表之後,查看第n個標籤值
  • 列表方式跟length()函數一樣
  • 列表跟n用逗號隔開
    https://ithelp.ithome.com.tw/upload/images/20221006/20151717MV0hWLKoPc.png

|Join()函數|:

  • 連接兩個列表變成一個列表
    (只能連接兩個列表,多個列表要連續使用join)
  • 列表之間用逗號隔開
  • 每個列表都各自被()包住
  • 用join的時候 列表內的標籤值也要用逗號隔開
    https://ithelp.ithome.com.tw/upload/images/20221006/20151717r5ZM44Lvly.png

|Append()函數|:

  • 在列表的最後面再加一個值
  • 沒有限定要用空格還是逗號隔開
    https://ithelp.ithome.com.tw/upload/images/20221006/201517178ustPV9QWA.png

|Zip()函數|:

  • 結合很多個列表變成一個多維的樣子
  • 列表個數值要一樣
    https://ithelp.ithome.com.tw/upload/images/20221006/20151717cstnX4XDx7.png

|Index()函數|:

  • 在一個列表裡面找到一個值再返回該位置
  • 很像nth()函數的相反
    https://ithelp.ithome.com.tw/upload/images/20221006/20151717zROOL9Y0DS.png

/images/emoticon/emoticon47.gif


上一篇
[DAY25]SASS數字函數
下一篇
[DAY27]SASS字符串函數|Introspection函數
系列文
關於SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言