Sass (Syntactically Awesome Stylesheets) — является одним из самых распространенных и удобных инструментов для улучшения взаимодействия с css.
Как и любой профессиональный инструмент, Sass содержит в себе множество функций для работы, некоторые из них, возможно не так часто применяется на практике, но являются очень полезными в определенных ситуациях.
В этой статье мы рассмотрим одну из таких функций. Речь пойдет о цикле for.
Предварительно возьмем проект, который мы создали в статье Перехват ошибок в Gulp для препроцессора Sass и на примере которого мы разберем основы использования циклов в Sass:
git clone git@github.com:sbogdanov108/ex_gulp_sass_notify.git
Или можно скачать архив по ссылке:
https://github.com/sbogdanov108/ex_gulp_sass_notify/archive/master.zipПроизведем установку всех необходимых модулей для работы с 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