Условные стили с настраиваемыми свойствами css

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

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

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

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

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


css css-variables theming specifications
person timetowonder    schedule 02.10.2018    source источник
comment
Зависит от того, хотите ли вы создавать стили на основе сравнения значений или текстовой строки, оба варианта возможны. Посмотрите этот справочник MDN по селекторам атрибутов для получения дополнительной информации. для ответов на сравнение значений вы можете использовать ответ @oridori для сопоставления строк, вы можете использовать селекторы атрибутов. Вот отличный справочник по сопоставлению строк. developer.mozilla.org/en-US/docs/Web/CSS/ Атрибут_селекторы   -  person Philippe    schedule 03.10.2018

Ответы (2)


arrow_upward
6
arrow_downward

Вот еще одна идея, похожая на ответ Ори Дрори, где я полагаюсь на использование недопустимого значения внутри границы для удаления границы. Это может быть полезно, если вы хотите использовать такие ключевые слова, как 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>

person Temani Afif    schedule 02.10.2018
comment
Хороший! На самом деле это ближе к тому, чего хочет OP, поскольку вы можете сделать background: var(--is-dark-theme, red); - person Ori Drori; 03.10.2018

arrow_upward
5
arrow_downward

Иногда вы можете использовать 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>

person Ori Drori    schedule 02.10.2018