Списки

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

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

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

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

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

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

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

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

/* Узнаем значение элемента списка по индексу: */
10px
sans-serif
length, 20px

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

/* Добавляем в список элементы: */
10px 20px 30px
blue, red, green
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.