Итерация подпирает классы через SASS - PullRequest
Новая
       35

Итерация подпирает классы через SASS

0 голосов
/ 15 сентября 2018

У меня есть 2 тега a.tag, и мне нужно установить фон, используя переменные и итерации. 

&.tag:nth-og-type(N) {
background: '$grad' + N
}

Я пробовал это:

variables.scss 

$grad: linear-gradient(to right, #d24a17, #7e490b),
linear-gradient(to right, #68bd25, #60801d), linear-gradient(#88ade4, #2a77b6),
linear-gradient(to right, #b0d925, #be8516), linear-gradient(to right, #251c8e, #0f2454);

style.scss 

@import url('./variables.scss');

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat, 'Segoe UI', sans-serif !important;
}

a {
  text-decoration: none;
  margin: 1px;
  padding: 5px 20px;
  border-radius: 50px;
  transition: 0.3s;
  #topNav & {
    color: black;
  }
  #topNav &:hover {
    background: black;
    color: white
  }
  &.tag {
    font-weight: bold;
    color: white;
    &:hover {
      color: lightgrey
    }
    @each $item in $grad {
      &:nth-of-type(#{$item}) {
        background: $item
      }
    }
  }

}

И я попробовал это: 

@for $i from 1 through 5 {
      a.tag {
        background: '$grad' + #{$i}
      }
    }

Но это тоже не сработало.

1 Ответ

0 голосов
/ 15 сентября 2018

Чтобы получить значение из списка переменных в пределах для директивы , вам необходимо использовать n-ую функцию , которая принимает два параметра: $listи $n.

Демонстрация: 

@for $i from 1 through length($grad) {
  a.tag:nth-of-type(#{$i}) {
    background: nth($grad, $i);
  }
}

Обратите внимание, что вы можете положиться на функцию length , чтобы получить длину вашего спискавместо использования фиксированного числа для параметра <end> вашей для директивы .

Полный код: sassmeister

...