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;
  }
}

但是看起来我必须复制颜色：白色;每个div，p和一个元素。或者我会错过什么（sass newbie here）？

Answer 1

这与Scss无关，这只是基本的CSS。

设置.container元素上的文本颜色是所有你需要做的就是设置所有子元素的文本颜色，Scss与否，作为样式级联（CSS）。

我怀疑你看到你的链接不是白色的，但这是因为它们有浏览器样式表指定的其他样式（包括颜色）（也可能在你的css中）。所以你还需要指定链接颜色。

您可以使用以下方法使用Scss轻松完成此操作：

.container {

    &,
    a {
      color: #fff;
    }
}

将编译为：

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

scss基础：嵌套继承

1 个答案: