用于子伪元素的简化SASS选择器？

Question

我尝试（并且已经成功）选择div，它的孩子，以及它的伪前/后元素，使用以下语法，但我想知道是否有是一种简化的方法吗？

经过一些研究后我发现以下scss适用于html / scss（链接到JSFiddle也在下面）：

HTML

想要将一个类all-borders-hidden添加到reveal-div元素，然后将其作为div本身，它的子/子，并且两个伪元素都更新为没有边框：

<div class="reveal-div">
  Parent Div
  <div class="main-image-div"> 
                     Main Cild Div
     </div>
</div>

SCSS

.reveal-div {

    border: 2px solid black;
    // I toggle the all-borders-hidden class on the parent/ancestor
    // reveal-div class element
    // The following works, but it's a bit verbose - can it be simplified
    &.all-borders-hidden {
        border: none;
    }
    &.all-borders-hidden *{
        border: none;
    }
    &.all-borders-hidden::after{
        border: none;
    }
    &.all-borders-hidden::before{
        border: none;
    }
}

我有exmaple running in jsfiddle

Answer 1

您可以再次使用&：

.reveal-div {

    border: 2px solid black;
    // I toggle the all-borders-hidden class on the parent/ancestor
    // reveal-div class element
    // The following works, but it's a bit verbose - can it be simplified
    &.all-borders-hidden {
        border: none;
        * {
            border: none;
        }
        &::after{
            border: none;
        }
        &::before{
            border: none;
        }
    }
}

如果他们正在共享border:none，您可以这样做：

.reveal-div {

    border: 2px solid black;
    // I toggle the all-borders-hidden class on the parent/ancestor
    // reveal-div class element
    // The following works, but it's a bit verbose - can it be simplified
    &.all-borders-hidden {
        &,
        *,
        &::before,
        &::after{
            border: none;
        }
    }
}