Пользовательские свойства CSS (переменные) для блочной модели - PullRequest
Новая
       7

Пользовательские свойства CSS (переменные) для блочной модели

5 голосов
/ 10 апреля 2019

Я пытаюсь использовать переменные 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;
}

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

Вот стэкблиц, с которым я играю: stackblitz

Ответы [ 2 ]

3 голосов
/ 10 апреля 2019

Вы можете сбросить значение, используя 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 () используется в свойстве animation или в одной из его длинных цепей, обработайте пользовательское свойство как имеющее его начальное значение для остальной части этого алгоритма.
  2. Если значение пользовательского свойства, названное первым аргументом дляфункция var () - это что угодно , кроме начального значения , замените функцию var () значением соответствующего пользовательского свойства.В противном случае
  3. , если функция var () имеет в качестве второго аргумента запасное значение , заменит функцию var () на запасное значение .Если в резерве есть какие-либо ссылки на var (), замените их.
  4. В противном случае свойство, содержащее функцию var (), будет недопустимым во время вычисления значения
3 голосов
/ 10 апреля 2019

Значение 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>
...