CSS-переменные против CSS-модулей @value

Question

Мне было интересно, чем именно отличается функция css var (- red) и @value red от модулей css.

Модули CSS Пример:

@value red from "./color.m.css";

.background {
    background-color: red;
}

CSS Var () Пример:

@import "./color.m.css";

.background {
    background-color: var(--red);
}

Есть ли преимущество при использовании одного из них?
Заранее спасибо за помощь!

Answer 1

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

модуль и переменная css несопоставимыкак я думаю.

пожалуйста, проверьте эту ссылку для получения дополнительной ссылки.

Нажмите здесь для описания модуля Css

Описание переменной Css

Answer 2

CSS-модули @value равно

1. Аналогично переменной препроцессора (sass / less).Он жив во время компиляции.
2. Как он компилируется в простой CSS.Он работает в любом браузере.

CSS Var () - это

1. Динамическая переменная в файле CSS.Любое изменение его значения отражается вживую в используемых элементах.
2. Как новая функция CSS, работает только в современных браузерах