Добрый день уважаемые. Есть вот такой простой пример на SCSS https://jsfiddle.net/drz8azgc/1/
.block {
display: inline-block;
width: 30px;
height: 100px;
border: 1px solid #000;
font-size: 0;
/* Кстати, почему это не срабатывает, и блоки имеют отсту слева? ?*/
}
.block {
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
background-color: #f00;
}
}
}
<div class="bigBlock">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
Вопрос, как дополнить цикл так, что б блоки отображались как на картинке? Тоесть я хочу получить некую волну из этих блоков.(или синусойду, не знаю вообщем как её назвать) По сути тут зависимость только от margin-top. Но вот как цикл правильно в scss прописать, я не знаю.