Списки

Совместимость (квадратные скобки):

Dart Sass

✓

LibSass

начиная с 3.5.0

Ruby Sass

начиная с 3.5.0

➤

Списки содержат последовательность других значений. В Sass элементы списков могут разделяться запятыми (Helvetica, Arial, sans-serif), пробелами (10px 15px 0 0) или слешами, если внутри списка используется единообразное разделение. В отличие от большинства других языков, списки в Sass не требуют специальных скобок: любые выражения, разделённые пробелами или запятыми, считаются списком. Однако списки можно записывать в квадратных скобках ([line1 line2]), что полезно при использовании grid-template-columns.

При записи списков без скобок можно использовать круглые скобки, чтобы вложить списки друг в друга или устранить неоднозначность между разделителями списка и другими вариантами использования пробелов или запятых. Например, (1, 2), (3, 4) — это список, содержащий два списка, каждый из которых содержит два числа; а adjust-font-stack((Helvetica, Arial, sans-serif)) передаёт функции adjust-font-stack один аргумент, содержащий три названия шрифтов.

Списки Sass могут содержать один или даже ноль элементов. Список из одного элемента можно записать как (<expression>,) или [<expression>], а пустой список — как () или []. Кроме того, все функции для работы со списками рассматривают отдельные значения, не входящие в списки, так, как если бы это были списки, содержащие такое значение. Поэтому обычно нет необходимости явно создавать списки из одного элемента.

Списки с разделителями-слешами

В Sass списки можно разделять слешами, чтобы представлять такие значения, как сокращённая запись font: 12px/30px для задания font-size и line-height или синтаксис hsl(80 100% 50% / 0.5) для создания цвета с заданным значением непрозрачности. Однако в настоящее время списки с разделителями-слешами нельзя записывать напрямую. Исторически Sass использовал символ / для обозначения деления, поэтому, пока существующие таблицы стилей переходят на использование math.div(), списки с разделителями-слешами можно записывать только с помощью list.slash().

Подробнее см. в разделе «Ломающее изменение: слеш как оператор деления».

Использование списков

Sass предоставляет несколько функций, которые позволяют использовать списки для создания мощных библиотек стилей или делать таблицу стилей приложения более понятной и удобной в сопровождении.

Индексы

Многие из этих функций принимают или возвращают числа, называемые индексами, которые указывают на элементы списка. Индекс 1 обозначает первый элемент списка. Обратите внимание: это отличается от многих языков программирования, где отсчёт индексов начинается с 0! В Sass также легко обратиться к концу списка. Индекс -1 обозначает последний элемент списка, -2 — предпоследний и так далее.

Доступ к элементу

Списки не очень полезны, если из них нельзя получать значения. Чтобы получить элемент списка по заданному индексу, можно использовать функцию list.nth($list, $n). Первый аргумент — сам список, а второй — индекс значения, которое нужно получить.

@use 'sass:list';

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

// SASS
@use 'sass:list'

@debug list.nth(10px 12px 16px, 2)  // 12px
@debug list.nth([line1, line2, line3], -1)  // line3

Выполнение действия для каждого элемента

Для этого не используется функция, но это всё равно один из самых распространённых способов работы со списками. Правило @each выполняет блок стилей для каждого элемента списка и присваивает этот элемент переменной.

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

// SASS
$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

/* CSS */
.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

Добавление элемента в список

Также бывает полезно добавлять элементы в список. Функция list.append($list, $val) принимает список и значение, а затем возвращает копию списка с добавленным в конец значением. Обратите внимание: поскольку списки Sass неизменяемы, исходный список не изменяется.

@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

// SASS
@debug append(10px 12px 16px, 25px)  // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2)  // [col1-line1, col1-line2]

Поиск элемента в списке

Если нужно проверить, есть ли элемент в списке, или узнать его индекс, используйте функцию list.index($list, $value). Она принимает список и значение, которое нужно найти в этом списке, и возвращает индекс этого значения.

@use 'sass:list';

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

// SASS
@use 'sass:list'

@debug list.index(1px solid red, 1px)  // 1
@debug list.index(1px solid red, solid)  // 2
@debug list.index(1px solid red, dashed)  // null

Если значения нет в списке, list.index() возвращает null. Поскольку null является ложным значением, можно использовать list.index() вместе с @if или if(), чтобы проверить, содержит ли список заданное значение.

@use "sass:list";

$valid-sides: top, bottom, left, right;

@mixin attach($side) {
  @if not list.index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  // ...
}

// SASS
@use "sass:list"

$valid-sides: top, bottom, left, right

@mixin attach($side)
  @if not list.index($valid-sides, $side)
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}."


  // ...

Неизменяемость

Списки в Sass неизменяемы, то есть содержимое значения-списка никогда не меняется. Функции Sass для работы со списками всегда возвращают новые списки, а не изменяют исходные. Неизменяемость помогает избежать множества трудноуловимых ошибок, которые могут возникнуть, когда один и тот же список используется в разных частях таблицы стилей.

Тем не менее можно со временем обновлять состояние, присваивая новые списки одной и той же переменной. Это часто используют в функциях и миксинах для сбора множества значений в один список.

@use "sass:list";
@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@function prefixes-for-browsers($browsers) {
  $prefixes: ();
  @each $browser in $browsers {
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
  }
  @return $prefixes;
}

@debug prefixes-for-browsers("firefox" "ie"); // moz ms

// SASS
@use "sass:list"
@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@function prefixes-for-browsers($browsers)
  $prefixes: ()
  @each $browser in $browsers
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser))

  @return $prefixes


@debug prefixes-for-browsers("firefox" "ie")  // moz ms

Списки аргументов

При объявлении миксина или функции, принимающих произвольные аргументы, вы получаете специальный список, называемый списком аргументов. Он ведёт себя так же, как список, содержащий все аргументы, переданные миксину или функции, но у него есть дополнительная возможность: если пользователь передал именованные аргументы, их можно получить в виде карты, передав список аргументов функции meta.keywords().

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

// SASS
@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)

/* CSS */
pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}