Переменные CSS - Обмен значениями? - PullRequest
Новая
       6

Переменные CSS - Обмен значениями?

0 голосов
/ 28 мая 2018

У меня очень простая проблема с переменными CSS.Я хотел бы поменять местами две переменные CSS, в основном CSS-эквивалент [a, b] = [b, a] в ES6.Вот простой пример: 

<p>White background</p>
<button>Black background</button>
<div>
  <p>Black background</p>
  <button>White background</button>
</div>

:root {
  --primary-color: #fff;
  --secondary-color: #000;
}

body {
  background-color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
}

div {
  /* i'd like to do the following: */
  --primary-color: var(--secondary-color);
  --secondary-color: var(--primary-color);

  /* so here, `--primary-color` would be `--secondary-color` from `:root`
   * and any children have these colors swapped as well
   */
  background-color: var(--primary-color);
}

Однако, это терпит неудачу, потому что CSS var() s являются живыми привязками.Я что-то здесь упускаю?Или так работает спецификация в настоящее время?

1 Ответ

0 голосов
/ 28 мая 2018

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

:root {
  --p:#fff;
  --s:#000;
  --primary-color: var(--p);
  --secondary-color: var(--s);
}

body {
  background-color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
}

div {
  /* i'd like to do the following: */
  --primary-color: var(--s);
  --secondary-color: var(--p);
  
  background-color: var(--primary-color);
}
<p>White background</p>
<button>Black background</button>
<div>
  <p>Black background</p>
  <button>White background</button>
</div>
...