Sass (Syntactically Awesome Stylesheets) — является одним из самых распространенных и удобных инструментов для улучшения взаимодействия с css.

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

В этой статье мы рассмотрим одну из таких функций. Речь пойдет о цикле for.

Предварительно возьмем проект, который мы создали в статье Перехват ошибок в Gulp для препроцессора Sass и на примере которого мы разберем основы использования циклов в Sass:

git clone git@github.com:sbogdanov108/ex_gulp_sass_notify.git

Или можно скачать архив по ссылке:

Произведем установку всех необходимых модулей для работы с Sass:

npm install

Теперь все готово для начала работы с циклами.

Цикл for

Цикл for определяется с помощью директивы @for и последовательно выводит набор определенных стилей. Для каждой итерации цикла используется счетчик.

Директива имеет два вида записи:

1. @for $var from <НАЧАЛО> through <КОНЕЦ>
2. @for $var from <НАЧАЛО> to <КОНЕЦ>

Разница между этими двумя вариантами записи заключается в том, что в первом случае from ... through диапазон значений счетчика включает в себя <НАЧАЛО> и <КОНЕЦ>. Во втором же случае, значения счетчика цикла включают в себя <НАЧАЛО>, но исключают <КОНЕЦ>.

$var — может быть любым именем переменной, допустимой в Sass, например $i.

<НАЧАЛО> и <КОНЕЦ> являются Sass выражениями, которые должны возвращать числовые значения. В том случае, когда <НАЧАЛО> больше, чем <КОНЕЦ>, счетчик будет уменьшать свое значение, вместо увеличения.

Пример использования

Теперь рассмотрим практический пример.

Представим, что у нас есть изображение-спрайт, содержащее в себе 14-ть изображений, каждое из которых надо вывести по отдельности в качестве фоновой картинки для 14-ти блоков.

Создадим в корневой директории проекта файл с именем for-loop.html и с разметкой для 14-ти изображений:

<div class="wrapper">
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
</div>

И подключим styles.css:

<link rel="stylesheet" href="css/styles.css">

Добавим общих стилей для небольшой стилизации выводимых изображений в файл styles.scss:

.wrapper {
  margin : 0 auto;
  width  : 740px;

  > div {
    border        : 1px solid #ccc;
    border-radius : 5px;
    float         : left;
    margin        : 0 10px 10px 0;
    height        : 90px;
    width         : 173px;
  }
}

А теперь начинается главная магия Sass, благодаря которой можно обойтись пятью строчками кода для вывода 14-ти изображений, не считая переносов строк и комментариев.

Добавим в файл styles.scss следующий код:

@for $i from 0 to 14 {

  $step : -173px; // Шаг смещения по оси X для вывода изображения

  .wrapper {

    > div:nth-child(#{$i + 1}) {

      // На каждой итерации цикла увеличиваем смещение вывода изображения, которое умножаем на значение счетчика
      background : #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat ($step * $i) 0;
    }

  }
}

Результат

Эти пять строчек в итоге превращаются в полностью готовый css-код для вывода и стилизации 14-ти изображений:

.wrapper > div:nth-child(1) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat 0px 0; }

.wrapper > div:nth-child(2) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -173px 0; }

.wrapper > div:nth-child(3) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -346px 0; }

.wrapper > div:nth-child(4) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -519px 0; }

.wrapper > div:nth-child(5) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -692px 0; }

.wrapper > div:nth-child(6) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -865px 0; }

.wrapper > div:nth-child(7) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -1038px 0; }

.wrapper > div:nth-child(8) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -1211px 0; }

.wrapper > div:nth-child(9) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -1384px 0; }

.wrapper > div:nth-child(10) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -1557px 0; }

.wrapper > div:nth-child(11) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -1730px 0; }

.wrapper > div:nth-child(12) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -1903px 0; }

.wrapper > div:nth-child(13) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -2076px 0; }

.wrapper > div:nth-child(14) {
  background: #fff url("https://bogdanov-blog.ru/wp-content/themes/blogus/img/sprite.jpg") no-repeat -2249px 0; }

На этом первая статья о Sass-циклах завершена. Продолжение: Sass циклы — each и while. Статья вторая

Исходные коды доступны в git-репозитории по ссылке:
https://github.com/sbogdanov108/ex-sass-loops

А также демо по ссылке:
http://codepen.io/sbogdanov108/pen/XXaNBq?editors=110