Создание глобальных переменных CSS: управление темами стилей

Есть ли способ установить глобальные переменные в css, например:

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}

Ответы

Ответ 1

Последнее обновление: 26/05/2017

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

Еще год еще один браузер. Edge теперь присоединился к Mozilla и Google, поддерживая эту замечательную функцию.

Требуется препроцессор "НЕ"!

В CSS много повторений. Один цвет может использоваться в нескольких местах.

Для некоторых объявлений CSS можно объявить это выше в каскаде и наследование CSS естественно решить эту проблему.

Для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоэлементе :root, автор CSS может остановить некоторые экземпляры повторения, используя переменную.

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

Задайте свою переменную в верхней части таблицы стилей:

CSS

Создайте класс root:

:root {
}

Создайте переменную:

:root {
    --bgd: #333;
}

Добавьте имена для своей переменной, а затем значение:

(имена могут быть любой выбранной вами строкой.)

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}

Задайте переменные в любом месте документа CSS:

h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

ПОДДЕРЖКА/СОВМЕСТИМОСТЬ БРАУЗЕРА

FIREFOX: Версия 31 + (по умолчанию включена)

(Прокладывая путь как обычно.) Дополнительная информация из Mozilla

CHROME: Версия 49 + (по умолчанию включена).

"Эта функция может быть включена в Chrome версии 48 для тестирования, включив функцию экспериментальной веб-платформы. Введите chrome://flags/ в адресную строку Chrome, чтобы получить доступ к этой настройке."

Safari/IOS Safari: Версия 9.1/9.3 (по умолчанию включена).

Opera: Версия 39 + (по умолчанию включена).

Android: Версия 52 + (по умолчанию включена).

IE: Это никогда не произойдет.

Edge: Версия 15 + (по умолчанию включена).

Пользовательские свойства CSS приземлились в Windows Insider Preview build 14986

W3C SPEC

Полная спецификация предстоящих переменных CSS

Подробнее

ПОПРОБУЙТЕ ИСКАТЬ

Скрипт и фрагмент прилагаются ниже для тестирования:

(он будет работать только с поддерживаемыми браузерами.)

DEMO FIDDLE

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
  --W200: 200px;
  --Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
  float: var(--Lft);
  width: var(--W200);
  height: var(--W200);
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--red);
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
}
.Bx2 {
  color: var(--grey);
  background: black;
}
.Bx3 {
  color: var(--grey);
  background: var(--blue);
}
.Bx4 {
  color: var(--grey);
  background: var(--red);
}

<p>If you see four square boxes then variables are working as expected.</p>

<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>

Ответ 2

Вы не можете создавать переменные в CSS прямо сейчас. Если вам нужна такая функциональность, вам нужно использовать препроцессор CSS, например SASS или LESS. Вот ваши стили, поскольку они появятся в SASS:

$Color1:#fff;
$Color2:#b00;
$Color3:#050;

h1 {
    color:$Color1;
    background:$Color2;
}

Они также позволяют выполнять другие (удивительные) вещи, такие как селектора вложенности:

#some-id {
    color:red;

    &:hover {
        cursor:pointer;
    }
}

Это будет скомпилировано для:

#some-id { color:red; }
#some-id:hover { cursor:pointer; }

Ознакомьтесь с официальным учебным пособием SASS для инструкций по установке и т.д. о синтаксисе/функциях. Лично я использую расширение Visual Studio под названием Web Workbench от Mindscape для упрощения разработки, есть много плагинов для других IDE.

Update

По состоянию на июль/август 2014, Firefox внедрил черновик спецификации для переменных CSS, вот синтаксис:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

Ответ 3

Невозможно использовать CSS, но с использованием препроцессора CSS, такого как less или SASS.

Ответ 4

Я делаю так:

html:

<head>
    <style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>

xCss.php:

<? // place here your vars
$fntBtn = 'bold 14px  Arial'
$colBorder  = '#556677' ;
$colBG0     = '#dddddd' ;
$colBG1     = '#44dddd' ;
$colBtn     = '#aadddd' ;

// here goes your css after the php-close tag: 
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }

Ответ 5

Попробуйте SASS http://sass-lang.com/ или LESS http://lesscss.org/

Я люблю SASS и использую его для всех моих проектов.

Ответ 6

Вам понадобится LESS или SASS для того же самого.

Но вот еще одна альтернатива, которая, как я считаю, будет работать в CSS3.

http://css3.bradshawenterprises.com/blog/css-variables/

Пример:

 :root {
    -webkit-var-beautifulColor: rgba(255,40,100, 0.8);
    -moz-var-beautifulColor: rgba(255,40,100, 0.8);
    -ms-var-beautifulColor: rgba(255,40,100, 0.8);
    -o-var-beautifulColor: rgba(255,40,100, 0.8);
    var-beautifulColor: rgba(255,40,100, 0.8);
 }
  .example1 h1 {
    color: -webkit-var(beautifulColor);
    color: -moz-var(beautifulColor);
    color: -ms-var(beautifulColor);
    color: -o-var(beautifulColor);
    color: var(beautifulColor);
 }