как сбросить переменную CSS (также известную как пользовательские свойства) и использовать резервную?

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

Что-то типа:

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  --border-width: 0;
}
div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div {
  --border-width-top: 10px;
}

Это не будет работать, как если бы ширина границы была задана по умолчанию, тогда она всегда будет иметь приоритет над резервными значениями. Не уверен, что в настоящее время есть способ сделать это, но я чувствую себя так близко к поиску решения.

Вот стек, с которым я играю: stackblitz


css css-variables
person masimplo    schedule 10.04.2019    source источник
comment
Ответ Kukkuz работает для вашего конкретного примера, но я боюсь, что вы действительно спрашиваете, есть ли способ отменить определение переменных, определенных выше в дереве DOM. Или я слишком много думаю?   -  person Mr Lister    schedule 10.04.2019
comment
@MrLister, вы правы, см. Решение Темани   -  person kukkuz    schedule 10.04.2019

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете сбросить значение с помощью initial, чтобы использовать резервное значение:

:root {
  --border-width-top: 2px;
  --border-width-right: 2px;
  --border-width-bottom: 2px;
  --border-width-left: 2px;
  --border-width: 0;
}
div {
  margin:5px;
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div.box {
  --border-width:initial;
  --border-width-top: 10px;
}
<div>some content</div>
<div class="box">some content</div>

из спецификации:

Начальное значение настраиваемого свойства - это пустое значение; то есть вообще ничего. Это начальное значение имеет особое взаимодействие с обозначением var (), которое объясняется в разделе, определяющем var ().

и

Чтобы заменить var () в значении свойства:

  1. Если настраиваемое свойство, указанное в первом аргументе функции var (), искажено анимацией, а функция var () используется в свойстве анимации или одной из его длинных строк, обрабатывайте настраиваемое свойство как имеющее начальное значение для остальная часть этого алгоритма.
  2. Если значение настраиваемого свойства, названного первым аргументом функции var (), является любым кроме начального значения, замените функцию var () значением соответствующего настраиваемого свойства. В противном случае,
  3. если функция var () имеет резервное значение в качестве второго аргумента, замените функцию var () резервным значением. Если в резервной копии есть ссылки на var (), также замените их.
  4. В противном случае свойство, содержащее функцию var (), недействительно во время вычисления значения.
person Temani Afif    schedule 10.04.2019
comment
это круто ... Я немного поздно это заметил :) - person kukkuz; 10.04.2019
comment
Хороший. Я не знал этого о начальном. Ваш пример немного усложняет использование, поскольку я должен убедиться, что я определяю --border-width как начальное, иначе значение стороны игнорируется. Однако я попытался установить его как значение по умолчанию внутри корня, и, похоже, он делает именно то, что мне нужно. Есть ли что-то, чего я могу упустить, идя этим путем? - person masimplo; 10.04.2019
comment
@masimplo нет, это то же самое. Установка начального значения внутри корня или внутри элемента будет делать то же самое, поскольку во время оценки оно будет начальным, поэтому нам все равно, где вы устанавливаете начальное значение. Мы просто заботимся о значении VAR при выполнении оценки. - person Temani Afif; 10.04.2019

arrow_upward
3
arrow_downward

Значение fallback работает, только если переменная --border-width не определена:

Резервное значение настраиваемого свойства, которое используется в случае, если настраиваемое свойство недопустимо в используемом контексте.

MDN

См. Демонстрацию ниже:

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  /*--border-width: 0;*/
}

div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}

div {
  --border-width-top: 10px;
}
<div id="app">
  <h1>TypeScript Starter</h1>
</div>

person kukkuz    schedule 10.04.2019
comment
Да, я тоже так понял. Я ищу способ определить переменную, но не присвоить ей значение. Это сделано для того, чтобы он присутствовал в документации, но не влиял на границу, если не установлен явно. Спасибо за ответ. - person masimplo; 10.04.2019