变量动态分配给第 nth-child

Question

我正在尝试使用 SASS 完成一项非常简单的任务：我希望奇数 <li> 元素内的所有 h2 和 strong 标签都具有某种颜色，否则如果它是偶数 <li>，它们将获得另一种颜色。

我这样做了，但它不起作用只有第一种颜色有效 (cf5d18) :

li{
    $color: #cf5d18;

    &:nth-child(odd){
        $color: #739337;
    }

    h2{
        font-size: 1.7em;
        color: $color;
    }

    strong{
       color: $color;
    }

}

你们知道我该如何处理吗？

Answer 1

变量不是那样工作的 - odd/even 测试发生在浏览器中，在渲染时。不管那个变量有一个值还是另一个值。

我会选择更直接的路线：

$evencolor: #cf5d18;
$oddcolor: #739337;

li {
  h2 {
    font-size: 1.7em;
  }

  h2, strong {
    color: $evencolor;
  }

  &:nth-child(odd) {
    h2, strong {
      color: $oddcolor;
    }
  }
}

示例：http://codepen.io/paulroub/pen/ZYwdzE

变量动态分配给第 nth-child

Variable dynamically assigned with nth-child

css

sass