Списки в SASS
В этой статье объясняются списки в SASS.
Мы рассмотрим основы и расширенное использование списков SASS и приведем практические примеры.
YouTube Video
Списки в SASS
SASS предлагает полезные функции, похожие на программирование, в расширение к CSS. Среди них списки — очень полезная функция для динамического задания стилей.
Что такое список в SASS?
Список SASS — это набор значений, разделённых запятыми (,) или пробелами. Они используются при передаче нескольких значений свойствам CSS или при выполнении итераций.
1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;Главные особенности списков включают следующие моменты:.
- Список может содержать значения любого типа данных, такие как числа, строки или цвета.
- Вы можете выбрать между списками, разделёнными запятыми или пробелами, в зависимости от задачи.
Базовый пример определения стилей с помощью списков
Ниже приведён пример динамической генерации простых стилей границ с помощью списков.
1@use "sass:list";
2
3$border-widths: 1px, 2px, 3px;
4
5.border-example {
6 @for $i from 1 through list.length($border-widths) {
7 &-#{list.nth($border-widths, $i)} {
8 border-width: list.nth($border-widths, $i);
9 }
10 }
11}Результат компиляции
1.border-example-1px {
2 border-width: 1px;
3}
4
5.border-example-2px {
6 border-width: 2px;
7}
8
9.border-example-3px {
10 border-width: 3px;
11}- С помощью функции
nth()модуляsass:listвы можете получить определённое значение из списка.
Манипуляции со списками
Модуль sass:list предоставляет функции для работы со списками, упрощая получение и добавление элементов..
Извлечение элемента: nth()
nth() — функция, извлекающая элемент из списка.
1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red- В этом коде функция
nth()используется для получения значения по указанному индексу.
Проверка индекса: index()
index() — это функция, возвращающая позицию элемента в списке.
1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3- В этом коде
index()используется для определения, что элементblueявляется третьим в списке.
Получение длины списка: length()
length() — функция, возвращающая длину списка.
1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3- В этом коде функция
length()используется для получения количества значений в списке.
Добавление элемента: append()
append() — функция, используемая для добавления элементов в список.
1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle- В этом коде функция
append()используется для добавления значения в список.
Замена элемента: set-nth()
set-nth() — это функция, заменяющая элемент на заданной позиции другим значением.
1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue- В этом коде
set-nth()используется для замены второго элемента наyellow.
Объединение списков: join()
join() — это функция, объединяющая два списка.
1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d- В этом коде
join()используется для объединения двух списков в один.
Сопоставление списков: zip()
zip() — это функция, группирующая несколько списков поэлементно.
1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)- В этом коде
zip()используется для объединения имён и возрастов в пары.
Вложенные списки
Списки также могут быть вложенными, что позволяет использовать их как двумерные массивы.
1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red- Работая с такими сложными структурами данных, становится возможной продвинутая генерация стилей.
Практический пример: создание градиентов
Вот пример эффективного создания градиентов с помощью списков.
1@use "sass:list";
2@use "sass:math";
3
4$colors: red, orange, yellow, green, blue;
5
6@function gradient($colors) {
7 $gradient: ();
8 $len: list.length($colors);
9
10 @for $i from 1 through $len {
11 // build "color percent%" string with interpolation
12 $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13 $gradient: list.append($gradient, $item);
14 }
15
16 @return $gradient;
17}
18
19.background {
20 background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}Результат компиляции
1.background {
2 background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}-
Этот код демонстрирует автоматическую генерацию градиентов с использованием списков в SCSS.
- Цвета, используемые для градиента, определены в списке
$colors. - В функции
gradient()позиция рассчитывается и равномерно присваивается каждому цвету на основе количества цветов, создавая список для градиента. - В классе
.backgroundиспользуетсяlinear-gradientдля объединения сгенерированного списка цветов и применения горизонтального градиента.
- Цвета, используемые для градиента, определены в списке
-
Поскольку позиции автоматически рассчитываются в зависимости от длины списка цветов, вы можете легко создавать равномерные градиенты, добавляя или меняя цвета.
Меры предосторожности и лучшие практики
При использовании списков можно учитывать следующие моменты:.
-
Тип разделителя списка Списки, разделённые запятыми и пробелами, обрабатываются по-разному, поэтому выбор следует делать в зависимости от ситуации.
-
Размер списка При динамической работе со списками безопасно проверять их размер с помощью функции
length(). -
Работа с вложенными списками При работе с вложенными списками тщательная работа с индексами поможет избежать ошибок.
Заключение
Списки SASS — мощный инструмент для динамического задания стилей и эффективного управления сложным дизайном.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.