Sass リスト(List)関数
Sass リスト(List)関数はリストを処理するために使用され、リスト内の値にアクセスしたり、リストに要素を追加したり、リストを結合したりできます。
Sass リストは不変であるため、リストを処理するときは、元のリストを変更するのではなく、新しいリストが返されます。
リストの開始インデックス値は 1 です。0 ではないことに注意してください。
次の表は Sass のリスト関数を示しています。
| 関数 | 説明 & 例 |
|---|---|
| append(list, value, [separator]) | 単一の値をvalueリストの末尾に追加します。separator区切り文字です。デフォルトでは自動的に検出されるか、カンマまたはスペースとして指定できます。 例: append((a b c), d) 結果: a b c d append((a b c), (d), comma) 結果: a, b, c, d |
| index(list, value) | リスト内の要素valueのインデックス位置を返します。 例: index(a b c, b) 結果: 2 index(a b c, f) 結果: null |
| is-bracketed(list) | リストに角括弧があるかどうかを判断します 例: is-bracketed([a b c]) 結果: true is-bracketed(a b c) 結果: false |
| join(list1, list2, [separator, bracketed]) | 2つのリストを結合し、リストlist2をリストのlist1末尾に追加します。separator区切り文字です。デフォルトでは自動的に検出されるか、カンマまたはスペースとして指定できます。bracketedデフォルトでは角括弧があるかどうかが自動的に検出され、true または false に設定できます。 例: join(a b c, d e f) 結果: a b c d e f join((a b c), (d e f), comma) 結果: a, b, c, d, e, f join(a b c, d e f, $bracketed: true) 結果: [a b c d e f] |
| length(list) | リストの長さを返します 例: length(a b c) 結果: 3 |
| list-separator(list) | リストの区切り文字の種類を返します。スペースまたはカンマです。 例: list-separator(a b c) 結果: "space" list-separator(a, b, c) 結果: "comma" |
| nth(list, n) | n 番目のn項の値を取得します。 例: nth(a b c, 3) 結果: c |
| set-nth(list, n, value) | リストの n 番目のn項の値を設定します。value。 例: set-nth(a b c, 2, x) 結果: a x c |
| zip(lists) | 複数のリストを同じインデックス値ごとにグループ化し、新しい多次元リストを構成します。 例: zip(1px 2px 3px, solid dashed dotted, red green blue) 結果: 1px solid red, 2px dashed green, 3px dotted blue |
その他の拡張