Списки в Sass представлены значениями CSS-деклараций вроде margin: 10px 15px 0 0 или font-face: Helvetica, Arial, sans-serif. Списки - это всего-навсего серия из нескольких однотипных значений разделенных пробелами или запятыми. Фактически, индивидуальные значения также являются списками, просто это списки, которые состоят из одного элемента.

Сами по себе списки не делают ничего особенного, но список функций SassScript сделал их полезнее. Функция nth может получить доступ к элементам в списке, функция join может объединить несколько списков вместе, а функция append может добавлять элементы в список. Директива @each также может добавлять стили для каждого элемента в списке.

// Узнаем значение элемента списка по индексу:
nth(10px 20px 30px, 1) => 10px
nth((Helvetica, Arial, sans-serif), 3) => sans-serif
nth((width: 10px, length: 20px), 2) => length, 20px

// Объединяем списки в один:
join(10px 20px, 30px 40px) => 10px 20px 30px 40px
join((blue, red), (#abc, #def)) => blue, red, #abc, #def
join(10px, 20px) => 10px 20px

// Добавляем в список элементы:
append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)

В придачу к обычным значениям, списки могут содержать также другие списки. Например, 1px 2px, 5px 6px - это список из двух элементов, который содержит список 1px 2px и список 5px 6px. Если внутренние списки содержат тот же разделитель, что и внешний список, необходимо использовать скобки, чтобы было понятно где начинается и где заканчивается внутренний список. Например, (1px 2px) (5px 6px) - это список аналогичный предыдущему. Разница в том, что разделители у этого внешнего списка - пробелы, тогда как предыдущий список разделялся запятыми.

Когда списки преобразуются в обычный CSS, Sass не добавляет никаких скобок, так как CSS их не понимает. Это значит, что (1px 2px) (5px 6px) и 1px 2px 5px 6px будут выглядеть идентично, когда они попадут в CSS. Тем не менее, это не то же самое для Sass: первый пример содержит два списка, тогда как второй содержит 4 числа.

Список может также не содержать значений вообще. Такой список объявляется как (), который также является пустым массивом. Они не могут быть непосредственно преобразованы в CSS, если вы попытаетесь написать что-то вроде font-family: (), то Sass выдаст ошибку. Если список содержит пустые списки или null-значения, например, как 1px 2px () 3px или 1px 2px null 3px, то пустые списки и null-значения будут вырезаны при переводе в CSS.



На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.