SCSS List Functions - nth()與index()的用法

Posted on 2018-01-11 Edited on 2023-11-24 In SASS Views: Disqus:

一、nth($list, $n)

nth($list, $n)的用法為輸入一list並指定第n個內容要作輸出

SCSS輸入

$myList:orange, blue, green;

p {
    color: nth($myList,1);
}

CSS輸出

p {
  color: orange;
}

二、index($list, $value)

index($list, $value)的用法為用來找尋某個內容的index

SCSS輸入

$myStyle:pfp,kmt,dpp;
$myList:orange,blue,green;
$myIndex:index($myStyle,kmt);

p {
    color:nth($myList,$myIndex);
}

CSS輸出

p {
  color: blue;
}

參考資料：