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

使用nth-child动态分配的变量

1 个答案: