Articles
Введение в SASS/SCSS
Итерация в SASS

Итерация в SASS

В этой статье объясняется, как работать с итерациями в SASS.

Мы пошагово объясним, как выполнять итерации в SASS, используя реальные примеры кода.

YouTube Video

Итерация в SASS

Итерации в SASS помогают избежать дублирования кода и позволяют создавать гибкие и многократно используемые стили.

Причины использовать итерации в SASS

Использование итераций имеет несколько преимуществ, например:.

  • Повторное использование кода улучшается, что облегчает создание схожих шаблонов стилей.
  • Удобство поддержки повышается, упрощая одновременное изменение стилей.
  • Также уменьшается количество ошибок.

Например, можно создавать стили для кнопок с разными цветами или компонентов с несколькими размерами одновременно.

Синтаксис, используемый для итераций в SASS

Основной синтаксис для итераций в SASS следующий:.

  • С помощью @for можно выполнять итерацию по заданному диапазону чисел.
  • С помощью @each можно перебирать списки или карты в ходе итерации.
  • Используя @while, можно выполнять цикл до тех пор, пока не будет выполнено определённое условие.

Итерация с помощью @for

@for выполняет повторяющиеся действия на основании заданного диапазона чисел.

Синтаксис 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Укажите начальное и конечное значения для <start> и <end>. Использование to исключает конечное значение, а through включает его.

Пример

Следующий код автоматически генерирует классы с увеличивающейся на 1px толщиной границы.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Этот код автоматически создаёт классы с увеличивающейся на 1px толщиной границы. Здесь директива @for используется для цикла с 1 до 5.

Сгенерированный CSS 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Классы от .border-1 до .border-5 будут созданы последовательно, с увеличением толщины границы на 1px для каждого.

Итерация с помощью @each

@each выполняет цикл по спискам или ассоциативным массивам (картам). Это полезно, когда необходимо эффективно создавать шаблонные (повторяющиеся) классы.

Синтаксис 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Пример 1: Использование списка (list)

Следующий код создаёт несколько классов для цвета текста.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Этот код автоматически создаёт классы для цвета текста по каждому цвету из списка. Директива @each используется для последовательной обработки каждого значения из списка.

Сгенерированный CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Когда файл SASS компилируется в CSS, для каждого цвета из списка создаются такие классы, как .text-red, .text-blue и .text-green.

Пример 2: Использование карты (map)

Использование карты позволяет работать с парами «ключ — значение». В следующем примере цвета фона кнопок определяются с помощью карты.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

Сгенерированный CSS 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Когда файл SASS компилируется в CSS, для каждого ключа из карты будут созданы классы, такие как .bg-primary, .bg-success и .bg-danger.

Итерация с помощью @while

@while продолжает цикл до тех пор, пока условие остаётся истинным.

Синтаксис 

1/*
2@while <condition> {
3  ...
4}
5*/

Пример

Например, если вы хотите поэтапно увеличивать размер шрифта, вы можете записать это так:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Вы можете использовать директиву @while для пошагового увеличения размера шрифта при итерации. Используя переменную $i, классы автоматически создаются для значений от 1 до 5.

Сгенерированный CSS 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Когда файл SASS компилируется в CSS, классы с размерами шрифта от 1rem до 5rem создаются автоматически.

Продвинутый пример: совмещение итераций и вложенности

Совмещение итераций с возможностями вложенности SASS позволяет создавать ещё более продвинутые стили.

Пример

Ниже приведён пример, в котором цвета фона и наведения для кнопок определяются вместе.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Объединив итерацию и вложенность SASS, вы можете одновременно сгенерировать фоновые цвета кнопок и цвета при наведении. Для каждого цвета в карте создаётся класс .btn-, и с помощью вложенности определяется стиль :hover.

Сгенерированный CSS 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Когда вы конвертируете файл SASS в CSS, цвет фона и цвет при наведении для каждой кнопки генерируются автоматически, а стили :hover определяются совместно с использованием вложенности.

Важные моменты при использовании итераций

Учтите следующие моменты при использовании итераций для написания более эффективного и читаемого кода.

  1. Избегайте чрезмерно глубокой вложенности Излишняя вложенность снижает читаемость, поэтому сводите её к необходимому минимуму.

  2. Обратите внимание на влияние на производительность Если с помощью итераций генерируется слишком много классов, ваш CSS может оказаться избыточно большим.

  3. Используйте осмысленные имена переменных Для переменных, таких как $i или $item, используйте говорящие имена, чтобы упростить понимание вашего кода.

Резюме

Использование итераций в SASS позволяет создавать эффективные и легко поддерживаемые стили. В частности, выбор между @for, @each и @while позволяет создавать динамичный и гибкий CSS.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Функция `if` в SASS