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

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

В придачу к обычным значениям, списки могут содержать также другие списки. Например, 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. Также отправить оповещение об ошибке можно, нажав на эту ссылку.