Цикл for в Sass

Reading time ~7 minutes

Очень краткий пример работы с циклом

1
for
в препроцессоре Sass.

С чего вдруг мне приспичило воспользоваться циклом в препроцессоре? Все, как всегда, просто - в предыдущей статье, посвященной плагину Smooth Scroll (Плагин Smooth Scroll), мне потребовался создать пример разметки HTML-документа с заголовками всех уровней, с первого (h1) до шестого (h6). Все бы ничего, но вручную создавать стили для заголовков всех уровней как-то утомительно.

HTML-разметка для цикла for

Вот я и озаботился задачей автоматизировать этот процесс, через цикл. Для этой цели я использовал цикл

1
for
. Упростил пример, выкинув параграфы и оставив только заголовки всех уровней:

<div class="wrapper">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
  <h5>header 5</h5>
  <h6>header 6</h6>
</div>

Базовые CSS-стили

Затем пропишу основные стили для этой разметки:

$color: #778899;
$percent: 5%;
$percentStep: 5;
$fontSize: 76px;
$fontSizeStep: 10;

.wrapper{
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

Использую цикл for в Sass

Теперь у меня стоит задача “покрасить” все заголовки в оттенки цвета, указанного в переменной

1
$color: #778899;
. Для создания оттенков воспользуюсь функцией
1
lighten()
из препроцессора Sass.

Цвет будет меняться с шагом в 5% (

1
$percentStep: 5;
):

h1{
  color: lighten($color,5%);
}

h2{
  color: lighten($color,10%);
}

h3{
  color: lighten($color,15%);
}
...

Также будет изменяться размер шрифта (кегль) в заголовках уровней с первого (

1
h1
) до шестого (
1
h6
), с шагом 10px (
1
$fontSizeStep: 10
):

h1 {
  font-size: 76px;
}

h2 {
  font-size: 66px;
}

h3 {
  font-size: 56px;
}
...

Как видим, задача и вправду не для ленивых - это же надо тупо вбивать столько значений! Но мне поможет Sass и его циклы, а точнее - цикл

1
for
.

Для этого создаю такую конструкцию цикла

1
for
:

@for $i from 1 through 6 {
  h#{$i}{
    color: lighten($color,$percent);
    font-size: $fontSize;
    $percent: $percent + $percentStep;
    $fontSize: $fontSize - $fontSizeStep;
  }
}

Небольшая расшифровка приведенного выше цикла. В данном случае используется цикл

1
for
, в котором счетчик
1
$i
изменяет свое значение в диапазоне от 1 до 6 включительно. Конструкция
1
#{$i}
называется экранированием в Sass и служит для того, чтобы значение счетчика
1
$i
подставилось в коде “как есть”, в виде текста.

В результате получается такой вывод:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

Далее идут CSS-правила с использованием функции

1
lighten()
препроцессора Sass и переменных
1
$color
,
1
$percent
,
1
$fontSize
. Последние две строки производят увеличение значения переменных на указанный шаг:

$percent: $percent + $percentStep;
$fontSize: $fontSize - $fontSizeStep;

Приведенный выше SCSS-код скомпилируется в готовый CSS-код подобного вида:

h1 {
  color: #8695a4;
  font-size: 76px;
}

h2 {
  color: #94a2af;
  font-size: 66px;
}

h3 {
  color: #a3aeba;
  font-size: 56px;
}

h4 {
  color: #b1bbc5;
  font-size: 46px;
}

h5 {
  color: #c0c8d0;
  font-size: 36px;
}

h6 {
  color: #ced5db;
  font-size: 26px;
}

Смотрим результат в браузере и радуемся успеху:

Результат работы цикла for в Sass

Полный код примера цикла for в Sass

Полный код рассмотренного примера создания цикла

1
for
в Sass приведен ниже:

<div class="wrapper">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
  <h5>header 5</h5>
  <h6>header 6</h6>
</div>
@import "compass/reset";

$color: #778899;
$percent: 5%;
$percentStep: 5;
$fontSize: 76px;
$fontSizeStep: 10;

.wrapper{
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

@for $i from 1 through 6 {
  h#{$i}{
    color: lighten($color,$percent);
    font-size: $fontSize;
    $percent: $percent + $percentStep;
    $fontSize: $fontSize - $fontSizeStep;
  }
}

Скомпилированный в CSS-код результат нашего кодинга:

.wrapper {
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

h1 {
  color: #8695a4;
  font-size: 76px;
}

h2 {
  color: #94a2af;
  font-size: 66px;
}

h3 {
  color: #a3aeba;
  font-size: 56px;
}

h4 {
  color: #b1bbc5;
  font-size: 46px;
}

h5 {
  color: #c0c8d0;
  font-size: 36px;
}

h6 {
  color: #ced5db;
  font-size: 26px;
}

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017