Модули sass:string и sass:list

Кроме чисел и цветов Sass работает со строками — текстом вроде "icons/home.svg" — и списками — несколькими значениями подряд, например 12px 16px 20px. Модули sass:string и sass:list дают функции для тех и других. Больше всего они полезны внутри миксинов, функций и циклов.

Строки

Строка бывает в кавычках ("Inter") и без них (bold). + склеивает строки, остальное делает модуль sass:string:

// styles/main.scss
@use "sass:string";
 
$icon: "cart";
 
.icon-cart {
  background-image: url("/icons/" + $icon + ".svg");
}
 
.label {
  content: string.to-upper-case("new");
  font-family: string.unquote("'Inter', sans-serif");
}

.icon-cart {
  background-image: url("/icons/cart.svg");
}
 
.label {
  content: "NEW";
  font-family: 'Inter', sans-serif;
}

string.unquote() убрал внешние кавычки, и внутренние одинарные кавычки попали в CSS как есть.

Функция	Результат
`string.length("hello")`	`5`
`string.index("btn-primary", "-")`	`4`
`string.slice("btn-primary", 5)`	`"primary"`
`string.to-upper-case("new")`	`"NEW"`
`string.quote(bold)`	`"bold"`

Позиции в Sass считаются с 1, а не с 0, как в JavaScript.

Списки

Список — это значения через пробел или запятую. Вы уже писали списки: 8px 16px в padding и system-ui, sans-serif в font-family. Список можно сохранить в переменную — например, размеры шрифта сайта:

// styles/abstracts/_variables.scss
$font-sizes: 14px 16px 20px 28px;

list.nth() берёт элемент по номеру:

// styles/main.scss
@use "sass:list";
@use "abstracts/variables";
 
h1 {
  font-size: list.nth(variables.$font-sizes, 4);
}
 
small {
  font-size: list.nth(variables.$font-sizes, 1);
}

h1 {
  font-size: 28px;
}
 
small {
  font-size: 14px;
}

<style>
  h1 {
    font-size: 28px;
  }
 
  small {
    font-size: 14px;
  }
</style>
 
<h1>Заголовок</h1>
<small>Мелкий шрифт</small>

Изменение списков

Списки в Sass никогда не меняются на месте: функции возвращают новый список, который сохраняют в переменную:

// styles/main.scss
@use "sass:list";
 
$fonts: Inter, Arial;
$fonts: list.append($fonts, sans-serif);
$heading-fonts: list.join(Georgia, $fonts);
 
body {
  font-family: $fonts;
}
 
h1 {
  font-family: $heading-fonts;
}

body {
  font-family: Inter, Arial, sans-serif;
}
 
h1 {
  font-family: Georgia, Inter, Arial, sans-serif;
}

Функция	Что делает
`list.length($list)`	Количество элементов
`list.nth($list, $n)`	Элемент номер `$n`; `-1` — последний
`list.append($list, $value)`	Новый список с ещё одним элементом
`list.join($list1, $list2)`	Два списка, объединённые в один
`list.index($list, $value)`	Позиция значения или `null`

Вся сила списков раскрывается вместе с циклом @each, который перебирает элементы по одному.

Частая ошибка

list.nth() с номером за концом списка останавливает компиляцию с ошибкой $n: Invalid index 5 for a list with 4 elements. Считайте с 1, а чтобы взять последний элемент без подсчёта, используйте -1: list.nth($font-sizes, -1) даёт 28px.

Спасибо, что читаете!

Строки

Списки

Изменение списков

Частая ошибка

Спасибо, что читаете!