如何在SCSS中将样式应用于父级和子级

Question

我有这种情况:

<div class="parent">
     <a class="child"></a>
</div>

而且我想给宽度:两者都是100%的规则.在SCSS中是否有更好的方法而不是写作:

.parent{
    width: 100%;
    .child{
        width: 100%;
    }
 }

我对SCSS语法很新,所以也许这是一个非常简单的问题,但我无处可寻找一个简单的答案.

Answer 1

你用当前选择器作为目标&,所以你可以写:

.parent {
  &, .child {
    width: 100%;
  }
}

作为奖励,您还使用&如下:

.parent {
  &.mother {
    // target elements classed `parent` AND `mother`

    .grandparent & {
      // target elements classed `parent` AND `mother` with a 
      // `grandparent` ancestor.
    }
  }
}

Answer 2

尝试width根本不设置子元素:)