Sassリスト

投稿日: 2022-04-20 2022-04-20

Sassのリストは、変数内に格納されている一連のアイテムです。リストを使用すると、単語やキーワードをまとめることができます。その後、nth（）関数を使用してこれらのアイテムのいずれかにアクセスできます。

リストはスペースまたはコンマで区切ることができ、リスト項目は引用符で囲まないか、一重引用符または二重引用符で囲むことができます。（注：引用符で囲む場合は、unquote（）関数を使用して削除する必要があります。

$colours: red green blue;
$padding: '10px', '20px', '30px';
$border: "solid" "dotted";

// nth takes the list name as 1st param
// and list item as the 2nd
div {
  background: nth($colours, 3);
  padding: nth($padding, 2); // "20px"
  border: 2px unquote(nth($border, 1));
}

位置を覚えて各プロパティにアクセスするのは、あまり効率的ではありません。同様の変数（色など）をグループ化する場合は、 SassMapsの方が適しています。リストは、 SassLoopsを使用するときに非常に役立ちます。

getdocs

13036