Question

我有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}
      }
    }

但是它也不起作用。

Answer 1

要从指令中的列表变量获取值，您需要使用nth function，该参数带有两个参数：{{1} }和$list。

演示：

$n

请注意，您可以依靠length function来获取列表的长度，而不是对 for指令的@for $i from 1 through length($grad) { a.tag:nth-of-type(#{$i}) { background: nth($grad, $i); } }参数使用固定的数字。< / p>

完整代码：sassmeister

通过SASS迭代道具类

1 个答案: