SCSS基础:嵌套继承

Question

我有这样的结构:

<div class="container">
  <p>Some content</p>
  <div class="subcontainer">
    <p>Some content</p>
    <div class="anothersub">
      <p>Some content with <a href="#">a link</a>.</p>
    </div>
  </div>
</div>

假设我想为div元素中包含的所有子元素应用一种颜色。

我认为scss的嵌套特性意味着我可以通过写这样的东西来获得所有的白色文本:

.container {
  color: white;
  .subcontainer {
    // other rules
    margin: 10px;
  }
  .anothersub a {
    text-decoration: none;
  }
}

但是看起来我必须复制color: white;对于每一个div, p和一个元素。还是我错过了什么?

Answer 1

这实际上与css无关，这只是基本的css。

设置。container元素的文本颜色是你所需要做的就是为所有的子元素设置文本颜色，不管是不是Scss，因为样式级联(CSS)

我怀疑你看到你的链接不是白色的，但这是因为他们有额外的样式(包括颜色)指定的浏览器样式表(也可能在你的css)。所以你还需要指定一个链接的颜色。

使用Scss可以很容易地做到这一点:

.container {
    &,
    a {
      color: #fff;
    }
}

将被编译为:

.container { color: #fff;}
.container a {color: #fff;}