Как работают списки в Sass

Development | Amber | Комментировать запись

В контексте Sass списки – это просто набор элементов, хранящихся в переменной. По сути, списки позволяют централизованно хранить слова, ключи ил и любые другие однотипные значения. Можно сказать, что индивидуальное значение Sass – тоже в каком-то смысле список, просто он состоит из одного значения

При необходимости пользователь может получить доступ к любому из хранящихся в списке элементов с помощью функции nth().

Чтобы объединить несколько списков в один, используется функция join(). Для добавления элементов в существующий список существует функция append().

Списки можно разделять пробелами или запятыми, а элементы списка можно записывать без кавычек, либо же заключать в одинарные или двойные кавычки.

Примечание: Если вы заключите элементы в кавычки, вам нужно будет использовать функцию unquote(), чтобы удалить их:

$colours: red green blue;
$padding: '10px', '20px', '30px';
$border: "solid" "dotted";

// nth takes the list name as 1st param
// and list item as the 2nd
div {
  background: nth($colours, 3);
  padding: nth($padding, 2); // "20px"
  border: 2px unquote(nth($border, 1));
}

Конечно, извлекать каждое из свойств, запоминая их положение в списке, неудобно и неэффективно. Если вы хотите сгруппировать подобные переменные (например, цвета), для этого лучше использовать Sass Maps. Списки же полезнее использовать с циклами Sass.

Читайте также: Как работают переменные в Sass