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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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