Использование CSS @Variables

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

Вот мой CSS:

@variables {
 defaultColor: #8E5050;
 defaultBackGround: #E1DBC3;
}
body {
 background: var(defaultBackGround);
}
a {
 color: var(defaultColor);
}

Я также пробовал:

body {
 background: @defaultBackGround;
}
a {
 color: @defaultColor;
}

Никто из них не работает, что я делаю неправильно? Благодаря

Ответы

Ответ 1

Я бы использовал препроцессор CSS, например Sass или Less.

Ответ 2

Используемые переменные не являются частью стандартной спецификации CSS. Похоже, вы пишете в какой-то CSS-среде.

Если вы хотите использовать чистый CSS, вы застряли с настройкой значений цветов/полей/заполнения вручную каждый раз. Но хорошая функция "Поиск и замена" в вашем любимом текстовом редакторе может вам помочь.:)

Если вы хотите использовать эти переменные, @Petah имеет для вас правильный ответ.:)

Ответ 3

Используйте собственные переменные CSS3!

Переменные на самом деле являются родной функцией в CSS3 - вы можете прочитать спецификацию в MDN. Тем не менее, они по-прежнему являются относительно новой функцией, поэтому вы можете ознакомиться с диаграммами поддержки браузера здесь перед их использованием.

При этом переменные CSS поддерживаются новейшими версиями Chrome, Firefox, Opera, Safari и Microsoft Edge.

В следующем коде показан пример использования переменных CSS:

:root {
    --name: #ff0000;
}
p {
    color: var(--name);
}

Как это работает?

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

Переменная может быть определена с помощью --name:content;, где name - это имя переменной, а содержимое - это содержимое переменной (это может быть цвет, например #ff0000, размер, например 1em, или одно из многих возможных значений).

Затем просто используйте var(--name) вместо свойства в вашем коде CSS, где name снова является именем, которое вы назвали переменной.

Ответ 4

Из того, что я понимаю, переменные еще не полностью поддерживаются, но именно так вы их установите, когда они:

/* declare in :root with the usual browser prefixes */
:root {
  var-myVariableColor: #f00;
  -webkit-var-myVariableColor: #f00;
  -moz-var-myVariableColor: #f00;
  -ie-var-myVariableColor: #f00;
}

/* to reference encase in var() */
body {
  background-color: var(myVariableColor);
}