Is it possible to check if SCSS element is empty?

Question

Is it possible to check if an element is not empty using SCSS?

For example, I want to declare a variable if the class is empty.

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

Something like that:

$variable: 100%;

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

Answer 1

Currently, you can only use javascript to detect if an element is empty or not. Basically you would need to check if the element has innerHTML. Then set some variables based on that.

There is currently a working draft for CSS4 that allows you to detect if the element has content. https://developer.mozilla.org/en-US/docs/Web/CSS/:has

In theory, you would be able to check if the element has any or very specific children.

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

Likewise, there will be a selector that can check if an element is empty. https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

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

Until the drafts are implemented. Sass will not be able to use these features.