2

Добрый день уважаемые. Есть вот такой простой пример на 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 прописать, я не знаю.

1 ответ 1

4

Код sass:

.block
  display: inline-block
  height: 100px
  width: 20px
  margin: 2px
  background-color: #333

.block
  @for $i from 1 through 20
    &:nth-child(#{$i})
      margin-bottom: sin($i)*10 + px

CODEPEN.

.block {
  display: inline-block;
  height: 100px;
  width: 20px;
  margin: 2px;
  background-color: #333;
}

.block:nth-child(1) {
  margin-bottom: 8.41471px;
}

.block:nth-child(2) {
  margin-bottom: 9.09297px;
}

.block:nth-child(3) {
  margin-bottom: 1.4112px;
}

.block:nth-child(4) {
  margin-bottom: -7.56802px;
}

.block:nth-child(5) {
  margin-bottom: -9.58924px;
}

.block:nth-child(6) {
  margin-bottom: -2.79415px;
}

.block:nth-child(7) {
  margin-bottom: 6.56987px;
}

.block:nth-child(8) {
  margin-bottom: 9.89358px;
}

.block:nth-child(9) {
  margin-bottom: 4.12118px;
}

.block:nth-child(10) {
  margin-bottom: -5.44021px;
}

.block:nth-child(11) {
  margin-bottom: -9.9999px;
}

.block:nth-child(12) {
  margin-bottom: -5.36573px;
}

.block:nth-child(13) {
  margin-bottom: 4.20167px;
}

.block:nth-child(14) {
  margin-bottom: 9.90607px;
}

.block:nth-child(15) {
  margin-bottom: 6.50288px;
}

.block:nth-child(16) {
  margin-bottom: -2.87903px;
}

.block:nth-child(17) {
  margin-bottom: -9.61397px;
}

.block:nth-child(18) {
  margin-bottom: -7.50987px;
}

.block:nth-child(19) {
  margin-bottom: 1.49877px;
}

.block:nth-child(20) {
  margin-bottom: 9.12945px;
}
<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>

Советую переходить на sass, sccs бесполезен по определению.
Выглядит прекрасно до тех пор, когда страница стилей не превышает 1 экран. Дальше начинается жесть.

10
  • 1
    Дальше начинается жесть. А чем спасает sass? Отсутствием точек с запятыми и скобок?
    – YozhEzhi
    Commented 25 мар. 2017 в 20:27
  • @YozhEzhi, конечно, ими. В этом единственное отличие sass от scss. В scss читаемость кода возрастает пропорционально написанным строкам стилей.
    – wokalek
    Commented 25 мар. 2017 в 20:38
  • Мне показалось, или сейчас был сарказм? :) С чего вытекает, что scss "бесполезен по определению"? Почему ребята из Bootstrap, например, пишут на scss, а не на sass.
    – YozhEzhi
    Commented 25 мар. 2017 в 20:40
  • @YozhEzhi, потому что ребята из Bootstrap простые люди, а всем людям свойственно отталкивать что-то новое и думать "делаю как делал, главное, что работает - и ладно". Функциональных отличий scss от sass - нет. Дело привычки и только. Но очевидно, что на sass код выглядит намного, намного понятнее. Советую ознакомиться с этим тяжелым видео, оно просто говорит об очевидных вещах. Люди из Бутстрап тоже могут ошибаться) Не стоит их ставить тут в пример.
    – wokalek
    Commented 25 мар. 2017 в 20:46
  • 1
    А Вы - можете ошибаться? На одной чаше Ваше мнение, на другой - все пользователи Бутстрапа...
    – YozhEzhi
    Commented 25 мар. 2017 в 20:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.