css - 变量动态分配给第 nth-child

Question

我正在尝试使用 SASS 完成一项非常简单的任务: 我想要我所有的 h2和 strong奇数内的标签 <li>元素有一些颜色，否则如果它是偶数 <li>他们会得到另一种颜色。

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

li{
    $color: #cf5d18;

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

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

    strong{
       color: $color;
    }

}

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

Answer 1

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

我会选择更直接的路线:

$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