Можно ли проверить, пуст ли элемент S CSS?

Question

Можно ли проверить, не является ли элемент пустым, используя S CSS?

Например, я хочу объявить переменную, если класс пуст.

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

Примерно так:

$variable: 100%;

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

Answer 1

В настоящее время вы можете использовать javascript только для определения, является ли элемент пустым или нет. В основном вам нужно проверить, имеет ли элемент внутренний HTML. Затем установите некоторые переменные на основе этого.

В настоящее время существует рабочий черновик для CSS4, который позволяет определить, есть ли у элемента содержимое. https://developer.mozilla.org/en-US/docs/Web/CSS/: имеет

Теоретически вы сможете проверить, имеет ли элемент какие-либо или очень специфические c дочерние элементы.

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

Аналогично, будет селектор, который может проверить, является ли элемент пустым. https://developer.mozilla.org/en-US/docs/Web/CSS/: пусто

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

До тех пор, пока проекты не будут реализованы. Sass не сможет использовать эти функции.