是否可以检查SCSS元素是否为空？

Question

使用SCSS是否可以检查元素是否为空？

例如，如果类为空，我想声明一个变量。

<div class="defaultClass">
   <!-- empty, has no child -->
</div>

类似的东西：

$variable: 100%;

.defaultClass {
    @if & not empty {
        $variable: 50%;
    } 
}

Answer 1

当前，您只能使用javascript来检测元素是否为空。 基本上，您需要检查元素是否具有innerHTML。然后根据此设置一些变量。

当前有一个CSS4的工作草案，可让您检测元素是否包含内容。 https://developer.mozilla.org/en-US/docs/Web/CSS/:has

从理论上讲，您将能够检查该元素是否具有任何子元素或非常具体的子元素。

div:has(*){
/* do this if the div has children */
--variable: 50%;
}

同样，将有一个选择器可以检查元素是否为空。 https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

div:empty {
/* do this if the div has no children */
--variable: 50%;
}

在实施草案之前。 Sass将无法使用这些功能。