如何在 Sass 中创建一个 if 语句来定位一个孩子？答案

【问题标题】：How do I create an if statement in Sass that locates a child?如何在 Sass 中创建一个 if 语句来定位一个孩子？
【发布时间】：2015-02-14 09:27:44
【问题描述】：

使用下面的代码，我想将 h2 值应用于除第一个“部分”之外的每个“部分”。

body > section {
  h2 {
      color: white;
  }
}

这是我正在尝试做的一个混乱的想法。如果有办法使用 if 语句还是需要运行 for 循环？

body > section {
  $first-child == body > section:first-child;

  @if $first-child != true {
    h2 {
      color: white;
    }
  }
}

【问题讨论】：

“应用 h2 值”是什么意思？
也许我措辞错误。 “h2”有一个属性：颜色值：白色。我想将其应用于除第一个部分之外的所有部分。
Sass 对您的文档一无所知，它只编译为 CSS。
从根本上说，CSS 是一种声明性语言，而不是命令性语言。你不写如何做某事，你写的是你想要的。没有 if 语句。最接近 if 语句的是一个选择器，它匹配一些东西而不是其他东西。如果您想以程序方式编写样式逻辑，请用 JavaScript 编写。
我的问题是专门针对 Sass 的，它允许使用 if 语句。

标签： css sass

【解决方案1】：

以下适用于支持 CSS3 的浏览器版本：

body > section:not(:first-child) h2 {
    color: white;
}

如果您需要支持较旧的浏览器并且您的标题有特定的颜色，您可以使用：

body > section h2 {
    color: white;
}
body > section:fist-child {
    color: whatever your h2 color is normally;
}

【讨论】：