Условные стили с пользовательскими свойствами CSS

Question

Мне нравится использовать пользовательские свойства css , но я часто нахожу то, что мне хотелось бы сделать.

Я хочу иметь возможность применять некоторые стили, условно основанные назначение пользовательского свойства CSS.Вот некоторый псевдокод:

.something {
  border: var(--is-dark-theme) ? 1px solid : none;
}

Я понимаю, что пользовательские свойства не работают так.Но может быть, есть какой-то другой способ, о котором я не знаю, который мог бы помочь мне достичь подобного результата?

Или, может быть, есть какое-то специальное предложение, которое могло бы быть возможным в будущем?

Answer 1

Вот еще одна идея, похожая на Ori Drori answer , где я полагаюсь на использование недопустимого значения внутри границы для удаления границы.Это может быть полезно, если вы хотите использовать некоторые известные ключевые слова, такие как false / true / yes / no

.something {
  border: var(--is-dark-theme,2px) solid black;
}

<div class="something">Dark theme</div>

<div class="something" style="--is-dark-theme: false">Light theme</div>

Answer 2

Иногда вы можете использовать calc(), чтобы получить примерно одинаковые результаты.В этом случае, если --is-dark-theme равно 0 или 1, вы можете умножить его на width границы, чтобы показать или скрыть:

.something {
  border: calc(var(--is-dark-theme) * 1px) solid black;
}

<div class="something" style="--is-dark-theme: 1">Dark theme</div>

<div class="something" style="--is-dark-theme: 0">Light theme</div>