sass:list
- Dart Sass
- since 1.23.0
- LibSass
- ✗
- Ruby Sass
- ✗
В настоящее время только Dart Sass поддерживает загрузку встроенных модулей с помощью @use. Пользователи других реализаций должны вместо этого вызывать функции, используя их глобальные имена.
💡 Интересный факт:
В Sass каждая карта считается списком, содержащим список из двух элементов для каждой пары ключ / значение. Например, (1: 2, 3: 4) считается как (1 2, 3 4). Так что все эти функции работают и с картами!
Отдельные значения также считаются списками. Все эти функции рассматривают 1px как список, содержащий значение 1px.
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 является списком, он вложен в возвращаемый список, а не все его элементы добавляются в возвращаемый список.
SCSS Syntax
@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 Syntax
@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, возвращается индекс его первого появления.
SCSS Syntax
@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 Syntax
@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 квадратные скобки.
list.join($list1, $list2, $separator: auto, $bracketed: auto)
join($list1, $list2, $separator: auto, $bracketed: auto) //=> list Возвращает новый список, содержащий элементы $list1, за которыми следуют элементы $list2.
⚠️ Внимание!
Поскольку отдельные значения считаются одноэлементными списками, можно использовать list.join() для добавления значения в конец списка. Однако это не рекомендуется, поскольку, если это значение является списком, оно будет объединено, что, вероятно, не то, что вы ожидаете.
Вместо этого используйте list.append(), чтобы добавить одно значение в список. Используйте list.join() только для объединения двух списков в один.
Если $separator - это comma, space или slash, возвращаемый список разделен запятыми, пробелами или косой чертой соответственно. Если это auto (по умолчанию), возвращаемый список будет использовать тот же разделитель, что и $list (или space, если $list не имеет разделителя). Другие значения не допускаются.
Если $bracketed имеет значение true, возвращаемый список заключен в квадратные скобки. Если это false, в возвращаемом списке нет скобок. Если это auto (по умолчанию), возвращаемый список будет заключен в квадратные скобки, если $list1 имеет значение. Другие значения не допускаются.
SCSS Syntax
@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 Syntax
@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.
Это также может вернуть количество пар на карте.
list.separator($list)
list-separator($list) //=> unquoted string Возвращает имя разделителя, используемого $list, either space, comma или slash.
Если $list не имеет разделителя, возвращает space.
SCSS Syntax
@debug list.separator(1px 2px 3px); // space
@debug list.separator(1px, 2px, 3px); // comma
@debug list.separator('Helvetica'); // space
@debug list.separator(()); // space
Sass Syntax
@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) Возвращает элемент $list с мндексом $n.
Если $n отрицательно, отсчет начинается с конца $list. Выдает ошибку, если нет элемента с индексом $n.
list.set-nth($list, $n, $value)
set-nth($list, $n, $value) //=> list Возвращает копию $list с элементом в индекс $n, замененным на $value.
Если $n отрицательно, отсчет начинается с конца $list. Выдает ошибку, если нет существующего элемента с индексом $n.
SCSS Syntax
@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 Syntax
@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 не может использовать их для нового синтаксиса, пока старый синтаксис не будет удален.
list.zip($lists...)
zip($lists...) //=> list Объединяет каждый список в $lists в один список подсписок.
Каждый элемент в возвращаемом списке содержит все элементы в этой позиции в $lists. Возвращаемый список является самым коротким списком в $lists.
Возвращаемый список всегда разделяется запятыми, а подсписки всегда разделяются пробелами.
SCSS Syntax
@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 Syntax
@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