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

【问题标题】：Is it possible to check if SCSS element is empty?是否可以检查 SCSS 元素是否为空？
【发布时间】：2020-04-25 14:32:25
【问题描述】：

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

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

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

类似的东西：

$variable: 100%;

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

【问题讨论】：

【解决方案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 将无法使用这些功能。

【讨论】：