sass:list

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、@useを使用して組み込みモジュールをロードできるのはDart Sassのみです。他の実装を使用するユーザーは、代わりにグローバル名を指定して関数を呼び出す必要があります。

💡豆知識

Sassでは、すべてのマップは、キー/値のペアごとに2要素のリストを含むリストとしてカウントされます。たとえば、(1: 2, 3: 4)は(1 2, 3 4)としてカウントされます。そのため、これらの関数はマップでも同様に機能します！

個々の値もリストとしてカウントされます。これらの関数はすべて、1pxを1pxという値を含むリストとして扱います。

list.append($list, $val, $separator: auto)
append($list, $val, $separator: auto) //=> list

$valが末尾に追加された$listのコピーを返します。

$separatorがcomma、space、またはslashの場合、返されるリストはそれぞれコンマ区切り、スペース区切り、スラッシュ区切りになります。それがauto（デフォルト）の場合、返されるリストは$listと同じセパレータを使用します（$listにセパレータがない場合はspace）。他の値は許可されません。

list.join()とは異なり、$valがリストの場合、返されるリスト内にネストされます。返されるリストにすべての要素が追加されることはありません。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.append(10px 20px, 30px); // 10px 20px 30px
@debug list.append((blue, red), green); // blue, red, green
@debug list.append(10px 20px, 30px 40px); // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma); // 10px, 20px
@debug list.append((blue, red), green, $separator: space); // blue red green

       PlaygroundSass構文@use 'sass:list'

@debug list.append(10px 20px, 30px)  // 10px 20px 30px
@debug list.append((blue, red), green)  // blue, red, green
@debug list.append(10px 20px, 30px 40px)  // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma)  // 10px, 20px
@debug list.append((blue, red), green, $separator: space)  // blue red green

list.index($list, $value)
index($list, $value) //=> number | null

$list内の$valueのインデックスを返します。

$valueが$listに存在しない場合、nullを返します。$valueが$listに複数回出現する場合、最初に現れたインデックスを返します。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

       PlaygroundSass構文@use 'sass:list'

@debug list.index(1px solid red, 1px)  // 1
@debug list.index(1px solid red, solid)  // 2
@debug list.index(1px solid red, dashed)  // null

list.is-bracketed($list)
is-bracketed($list) //=> boolean

$listに角括弧があるかどうかを返します。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.is-bracketed(1px 2px 3px); // false
@debug list.is-bracketed([1px, 2px, 3px]); // true

       PlaygroundSass構文@use 'sass:list'

@debug list.is-bracketed(1px 2px 3px)  // false
@debug list.is-bracketed([1px, 2px, 3px])  // true

list.join($list1, $list2, $separator: auto, $bracketed: auto)
join($list1, $list2, $separator: auto, $bracketed: auto) //=> list

$list1の要素と$list2の要素を合わせた新しいリストを返します。

⚠️ご注意ください！

個々の値は単一要素のリストとしてカウントされるため、list.join()を使用して値をリストの末尾に追加できます。ただし、その値がリストの場合、連結されるため、これは推奨されません。おそらく期待した結果とは異なるでしょう。

list.append()を使用して、リストに単一の値を追加してください。list.join()は、2つのリストを1つに結合する場合のみ使用してください。

$separatorがcomma、space、またはslashの場合、返されるリストはそれぞれコンマ区切り、スペース区切り、スラッシュ区切りになります。それがauto（デフォルト）の場合、返されるリストは、セパレータを持つ$list1があればそのセパレータを使用し、そうでなければセパレータを持つ$list2があればそのセパレータを使用し、どちらもなければspaceを使用します。他の値は許可されません。

$bracketedがauto（デフォルト）の場合、$list1が角括弧付きの場合は、返されるリストも角括弧付きになります。それ以外の場合は、$bracketedが真偽値の場合に角括弧が付き、偽の場合には角括弧が付きません。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.join(10px 20px, 30px 40px); // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def)); // blue, red, #abc, #def
@debug list.join(10px, 20px); // 10px 20px
@debug list.join(10px, 20px, $separator: comma); // 10px, 20px
@debug list.join((blue, red), (#abc, #def), $separator: space); // blue red #abc #def
@debug list.join([10px], 20px); // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true); // [10px 20px]

       PlaygroundSass構文@use 'sass:list'

@debug list.join(10px 20px, 30px 40px)  // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def))  // blue, red, #abc, #def
@debug list.join(10px, 20px)  // 10px 20px
@debug list.join(10px, 20px, comma)  // 10px, 20px
@debug list.join((blue, red), (#abc, #def), space)  // blue red #abc #def
@debug list.join([10px], 20px)  // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true)  // [10px 20px]

list.length($list)
length($list) //=> number

$listの長さを返します。

マップ内のペアの数も返すことができます。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.length(10px); // 1
@debug list.length(10px 20px 30px); // 3
@debug list.length((width: 10px, height: 20px)); // 2

       PlaygroundSass構文@use 'sass:list'

@debug list.length(10px)  // 1
@debug list.length(10px 20px 30px)  // 3
@debug list.length((width: 10px, height: 20px))  // 2

list.separator($list)
list-separator($list) //=> unquoted string

$listで使用されているセパレータの名前（space、comma、またはslash）を返します。

$listにセパレータがない場合は、spaceを返します。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.separator(1px 2px 3px); // space
@debug list.separator((1px, 2px, 3px)); // comma
@debug list.separator('Helvetica'); // space
@debug list.separator(()); // space

       PlaygroundSass構文@use 'sass:list'

@debug list.separator(1px 2px 3px)  // space
@debug list.separator((1px, 2px, 3px))  // comma
@debug list.separator('Helvetica')  // space
@debug list.separator(())  // space

list.nth($list, $n)
nth($list, $n)

インデックス$nにある$listの要素を返します。

$nが負の場合、$listの末尾からカウントされます。インデックス$nに要素がない場合はエラーをスローします。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

       PlaygroundSass構文@use 'sass:list'

@debug list.nth(10px 12px 16px, 2)  // 12px
@debug list.nth([line1, line2, line3], -1)  // line3

list.set-nth($list, $n, $value)
set-nth($list, $n, $value) //=> list

インデックス$nにある要素が$valueに置き換えられた$listのコピーを返します。

$nが負の場合、$listの末尾からカウントされます。インデックス$nに既存の要素がない場合はエラーをスローします。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto

       PlaygroundSass構文@use 'sass:list'

@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto

list.slash($elements...) //=> list

$elementsを含むスラッシュ区切りのリストを返します。

⚠️ご注意ください！

この関数は、スラッシュ区切りのリストを作成するための暫定的な解決策です。最終的には、1px / 2px / solidのようにスラッシュで直接記述されるようになりますが、現時点ではスラッシュは除算に使用されているため、古い構文が削除されるまではSassは新しい構文にスラッシュを使用できません。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px

       PlaygroundSass構文@use 'sass:list'

@debug list.slash(1px, 50px, 100px)  // 1px / 50px / 100px

list.zip($lists...)
zip($lists...) //=> list

$lists内のすべてのリストを、サブリストの単一リストに結合します。

返されるリストの各要素には、$listsのその位置にあるすべての要素が含まれます。返されるリストの長さは、$listsの中で最も短いリストの長さと等しくなります。

返されるリストは常にコンマ区切りで、サブリストは常にスペース区切りになります。

  SCSS

  Sass

       PlaygroundSCSS構文@use 'sass:list';

@debug list.zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
@debug list.zip(10px 50px 100px, short mid); // 10px short, 50px mid

       PlaygroundSass構文@use 'sass:list'

@debug list.zip(10px 50px 100px, short mid long)  // 10px short, 50px mid, 100px long
@debug list.zip(10px 50px 100px, short mid)  // 10px short, 50px mid

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド