sass:list

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

Возвращает копию $list с добавленным $val в конец.

Если $separator является comma, space или slash, возвращаемый список будет разделен запятыми, пробелами или слешами соответственно. Если это auto (по умолчанию), возвращаемый список будет использовать тот же разделитель, что и $list (или space, если у $list нет разделителя). Другие значения недопустимы.

Обратите внимание, что в отличие от list.join(), если $val является списком, он вложен в возвращаемый список, а не все его элементы добавляются в возвращаемый список.

@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

// SASS
@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

Возвращает индекс $value в $list.

Если $value не встречается в $list, возвращается null. Если $value встречается несколько раз в $list, возвращается индекс его первого появления.

@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

// SASS
@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 квадратные скобки.

@use 'sass:list';

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

// SASS
@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.

Если $separator равно comma, space или slash, возвращаемый список будет разделен запятыми, пробелами или слешами соответственно. Если это auto (по умолчанию), возвращаемый список будет использовать тот же разделитель, что и $list1, если у него есть разделитель, или же $list2, если у него есть разделитель, или же space.

Если $bracketed равно auto (по умолчанию), возвращаемый список будет заключён в квадратные скобки, если $list1 является таковым. В противном случае возвращаемый список будет заключён в квадратные скобки, если $bracketed является истинным, и без скобок, если $bracketed ложным.

@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]

// SASS
@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.

Также может возвращать количество пар в карте.

@use 'sass:list';

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

// SASS
@use 'sass:list'

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

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

Возвращает элемент $list с индексом $n.

Если $n отрицательно, подсчет ведётся с конца $list. Бросает ошибку, если элемента с индексом $n нет.

@use 'sass:list';

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

// SASS
@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

Возвращает копию $list с элементом на индексе $n, заменённым на $value.

Если $n отрицательно, подсчёт ведётся с конца $list. Бросает ошибку, если элемента с индексом $n нет.

@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

// SASS
@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.

@use 'sass:list';

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

// SASS
@use 'sass:list'

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

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

Объединяет каждый список в $lists в один список подсписков.

Каждый элемент возвращаемого списка содержит все элементы в соответствующей позиции в $lists. Возвращаемый список имеет длину, равную длине самого короткого списка в $lists.

Возвращаемый список всегда разделен запятыми, а подсписки всегда разделены пробелами.

@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

// SASS
@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