Могу ли я добавить имя класса в переменную CSS? - PullRequest
Новая
       13

Могу ли я добавить имя класса в переменную CSS?

12 голосов
/ 31 марта 2019

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

:root.white{ --bgcol:#FFF; --col:#000; }
:root.black{ --bgcol:#000; --col:#FFF; }

Тогда я мог бы просто переключить класс .black или .white из javascript, чтобы активировать все переменные. Каков наилучший подход для этого типа установки?

Ответы [ 2 ]

11 голосов
/ 31 марта 2019

Это, откровенно говоря, лучший (как и в большинстве идиоматических) подход - использование имен классов, если не вообще отдельных таблиц стилей (, как это было принято в течение многих, многих лет ), для тематических макетов с помощью пользовательских свойства. Это наиболее «фундаментальный» CSS-подход, когда JavaScript просто является тем клеем, который заставляет переключаться темы. Вы действительно не можете сделать намного лучше, чем это.

Для тех, кто не знает, что означает :root, и интересуется, где именно применяются имена классов, это элемент html (родительский элемент body). Так что здесь ничего особенного не происходит - вы просто переключаете имена классов в элементе html. Просто бывает, что глобальные пользовательские свойства традиционно определены для корневого элемента документа, поскольку он находится на верхнем уровне цепочки наследования.

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

const root = document.documentElement;

// Default theme - should assign declaratively in markup, not JS
// For a classless default theme, move its custom properties to unqualified :root
// Again, keep it separate from the other :root rule that contains non-theme props
// Remember, the cascade is your friend, not the enemy
root.classList.add('white');

document.querySelector('button').addEventListener('click', function() {
  root.classList.toggle('white');
  root.classList.toggle('black');
});
:root {
  --spacing: 1rem;
  color: var(--col);
  background-color: var(--bgcol);
}

:root.white {
  --bgcol: #FFF;
  --col: #000;
}

:root.black {
  --bgcol: #000;
  --col: #FFF;
}

p {
  margin: var(--spacing);
  border: thin dashed;
  padding: var(--spacing);
}
<button>Switch themes</button>
<p>Hello world!
2 голосов
/ 31 марта 2019

Использование :root селектора идентично использованию html, за исключением того, что его специфика выше, поэтому нет проблем при использовании этого подхода.

Например: 

:root {
  --bg: red;
}
:root.blue {
  --bg: blue;
}
// ...
div {
  background: var(--bg);
}

Позже вы должны просто изменить класс html и переменные изменится.

Вы можете увидеть пример в этой скрипке .

...