css - 子伪元素的简化 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>

控制

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