Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Краеугольной темой препроцессораSASSявляются циклы. Они позволяют многократно исполнять какие-либо последовательности действий. ВSASSциклы зачастую позволяют генерировать множество классов, которые, впоследствии, можно использовать в проекте.

2 Перед тем, как перейти непосредственно к написанию и пониманию циклов, введём основной пример, на котором мы и будем изучать все возможные типы циклов в препроцессореSASS. Представим, что у нас есть список, внутри которого находится 5 элементов:cat,dog,whale,bird,fish. Для каждого из элементов списка нужно составить класс следующего вида:

3 Какими путями мы сейчас можем пойти? Первым, что приходит в голову, является использование миксинов. Это действительно хороший вариант, который полностью удовлетворяет нашим запросам:

4 Теперь, для генерации иконок нам надо выполнить данный миксин для каждого элемента списка. То есть пять раз:

5 Иконки готовы - вы великолепны! Можно откинуться на спинку стула и отдохнуть. Это приемлемый вариант, если иконок у нас пять. А что, если в проекте у нас 20 иконок? Или даже 100? Может вы создаете свою библиотеку с иконками. В таком случае использование метода, который представлен выше - не лучший путь. Он даст нужный результат, но количество строк, которые нужно будет скопировать, достаточно велико. Каким же образом можно облегчить себе жизнь? Для этого вSASSсуществуют циклы. И с одним из них мы познакомимся прямо сейчас!

6 <h2>Цикл for</h2>

7 Цикл for позволяет задать нам необходимое количество повторений. Это очень удобно, если мы изначально знаем, или можем вычислить необходимое количество повторений блока кода.

8 Для записи такого цикла используется конструкция @for, у которой необходимо указатьсчётчик. Счётчик - простой механизм, в котором задаётся начальное и конечное значение. Каждый раз, исполнив блок кода, цикл вначале увеличивает счётчик на единицу, а потом проверяет, не вышло ли значение за границу. Если нет, то выполняем блок кода ещё раз. Каждый такой проход по блоку кода называетсяитерацией

9 Счётчик в цикле @for может быть записан одним из двух видов. Примеры ниже сделаны для счётчика от 1 до 5:

10 <ul><li>from 1 to 5. Счётчик с ключевым словом to считается до конечного числа,не включая конечное число. В данном варианте блок кода исполнится4 раза.</li>

11 <li>from 1 through 5. Счётчик с ключевым словом through считается до конечного числа,включая конечное число. Цикл с таким счётчиком исполнит блок кода5 раз.</li>

12 </ul>Все значения счётчика записываются в переменную, имя которой вы указываете сразу после ключевого слова @for. Полная запись цикла выглядит следующим образом:

13 Переменной, объявленной в качестве счётчика, можно пользоваться внутри цикла. В этом легко убедиться на следующем примере:

14 Счётчик $i был использован для того, чтобы высчитать необходимую сторону квадрата. В результате компиляции получится следующийCSSкод:

15 Обратите внимание, что мы использовали to в условии счётчика, поэтому сгенерировалось 4 класса.

16 Теперь решение первоначальной задачи становится немного проще. Можно воспользоваться циклом @for и сгенерировать классы столько раз, сколько нам это необходимо.

17 Возможно, вы заметили проблему этого кода - необходимо чётко знать количество элементов в списке. И пока это число небольшое, то снова всё отлично. Но как только этих элементов станет к примеру78, то каждый раз пересчитывать их количество вручную, чтобы внести изменение в счётчик, не доставит вам большого удовольствия.

18 Но есть способ отдать подсчёт самомуSASS- можно воспользоваться функцией length() и получить количество элементов в списке. В таком случае наш код может выглядеть следующим образом:

19 <h2>Цикл each</h2>

20 Вторым способом решения задачи по генерации классов с иконками является цикл @each. Этот циклперебираетзначения списка или ассоциативного массива и для каждого значения выполняет блок кода. При использовании данного цикла нам не нужно знать размер списка и создавать счётчики. Мы работаем непосредственно с каждым значением.

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

22 Данный цикл можно прочитать следующим образом:Для каждого числа в списке выполнитьи далее блок кода. Прекрасный способ обхода списка, при котором нам не нужно заводить отдельные переменные или обращаться к списку с помощью nth(), как было сделано в варианте с циклом @for.

23 Перенесём нашу задачу по генерации иконок, заменив цикл @for на цикл @each.

24 Вот теперь по-настоящему хорошо. Мы использовали именно тот цикл, который нам был нужен и тем самым сократили количество строк и повысили читаемость.

25 Совет:всегда обращайте внимание на то, какую операцию вы делаете. Если вам нужно просто выполнить блок кода определённое количество раз, то используйте цикл @for. При работе со списками/массивами и при использовании их значений используйте цикл @each. В большинстве случаев такое разделение поможет сделать ваш код чище

26 В примере выше мы рассмотрели, как с помощью @each обойти списки, но с ассоциативными массивами всё немного иначе. Как вы помните, в отличие от списков, где просто происходит перечисление значений, ассоциативные массивы имеют парыключ-значение. Цикл @each позволяет получать внутри блока кода и ключ, и значение. Для этого необходимо указать через запятую переменную для ключа и переменную для значения. В остальном принцип работы остаётся тем же.

27 В качестве примера возьмём более сложную структуру списка наших иконок и помимо названия в качестве ключа, они будут содержать так же и размер иконок в виде списка, которые есть в нашем проекте. В данном варианте мы объединим ассоциативный массив и список.

28 После компиляции мы получим следующийCSSкод для иконок с изображением кошки:

29 Остальные классы будут сгенерированы по аналогии.

30 В этом примере вы можете увидеть, что мы можем вкладывать циклы друг в друга. Причем эти циклы необязательно должны быть одного типа. Мы можем вложить @each внутри @for и наоборот. В каждом из этих случаев всё будет работать корректно. Главное, что переменные из внешнего цикла так же попадают и во внутренний. Именно поэтому внутри второго цикла @each можно было использовать переменную $icon, которая создается в цикле до этого.

31 Циклы часто совмещаются со списками и массивами. Например, на каждом шаге итерации обрабатывать список и изменять его. Представим, что нам нужно добавить единицу измерения к каждому элементу списка (10 15 20 25). Единица измерения задаётся в качестве аргумента функции add-unit.

32 Решение задачи требует знания работы со списками. Посмотрим на решение. Все функции вам уже известны, но не забудьте разобрать этот пример и попробовать изменить его, чтобы понять принцип работы:

33 <h2>Цикл while</h2>

34 Последним видом циклов, который существует в SASS, является цикл @while. Из его названия можно сделать вывод, что он работает по принципупока выполняется условие.

35 Для цикла @while необходимо указать условие. Пока условие выполняется - цикл отрабатывается. В качестве условия выступают такие же конструкции, как и с условными конструкциями @if/@else.

36 После компиляции получится следующийCSSкод:

37 Цикл @while сложен тем, что в нём очень просто забыть поработать с условием и уйти в бесконечный цикл. Если вы забудете указать $count: $count + 1;, то цикл не закончится никогда. Всегда следите за тем, чтобы условие менялось после каждого выполнения блока кода.