Создайте переменную в файле .CSS для использования в этом файле .CSS

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

Поскольку в CSS этого нет (пока, я думаю, в следующей версии будет), следуйте совету Конрада Рудольфа по предварительной обработке. Вероятно, вы захотите использовать тот, который уже существует: m4

http://www.gnu.org/software/m4/m4.html

Вы не первый, кто задается вопросом, и ответ отрицательный. У Эллиотта есть хорошая напыщенная речь: http://cafe.elharo.com/web/css-repeats-itself/. Вы можете использовать JSP или его эквивалент для генерации CSS во время выполнения.

Нет, но это делает Sass. Это препроцессор CSS, позволяющий использовать множество сочетаний клавиш, чтобы уменьшить объем CSS, который вам нужно написать.

Например:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

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

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Более того: миксины, которые действуют как функции, и возможность наследовать один селектор от другого. Это очень умно и очень полезно.

Если вы пишете код на Ruby on Rails, он даже автоматически скомпилирует его в CSS, но есть также компилятор общего назначения, который может сделать это за вас по запросу.

Нет требования, чтобы все стили для селектора находились в одном правиле, и одно правило может применяться к нескольким селекторам ... поэтому переверните это:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

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

Обратите внимание на акцент на «концептуально» в последнем предложении ... Это только что появилось в комментариях, так что я собираюсь немного расширить его, так как я видел, как люди совершают одну и ту же ошибку снова и снова в течение многих лет - предшествовало даже существованию CSS: два атрибута с одинаковым значением не обязательно означают, что они представляют один и тот же концепция. Небо вечером может казаться красным, как и помидоры, но небо и помидор не красные по одной и той же причине, и их цвета буду меняются со временем независимо. Точно так же, просто потому, что у вас есть два элемента в вашей таблице стилей, которым присвоен один и тот же цвет, размер или расположение, не означает, что они будут использовать эти значения в всегда. Наивный дизайнер, использующий группировку (как описано здесь) или переменный процессор, такой как SASS или LESS, чтобы избежать повторения ценить, рискует внести в будущем изменения в стили, которые невероятно подвержены ошибкам; всегда сосредотачивайтесь на контекстное значение стилей, когда хотите уменьшить повторение, игнорируя их текущие значения.

Вы все усложняете. Это причина существования каскада. Просто укажите свои селекторы элементов и классифицируйте свой цвет:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Затем примените его к элементам в HTML, переопределив, когда вам нужно использовать цвета вашей темы.

<h1>This is my heading.</h1>
<h1 class = "a-theme-color">This is my theme heading.</h1>

В настоящее время это не поддерживается, если вы не используете какой-либо скрипт для создания CSS на основе определенных вами переменных.

Однако кажется, что по крайней мере некоторые люди из мира браузеров являются работаю над этим. Итак, если когда-нибудь в будущем он действительно станет стандартом, нам придется подождать, пока он не будет реализован во всех браузерах (до тех пор он будет непригоден для использования).

См. Также Избегайте повторяющихся констант в CSS. Как сказал Фаринья, было сделано предложение по переменным CSS, но пока вы хотите использовать препроцессор.

Вы можете использовать несколько классов в атрибуте class элемента HTML, каждый из которых обеспечивает часть стиля. Итак, вы можете определить свой CSS как:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

а затем объедините классы по мере необходимости:

<h1 class = "ourColor">Blue Header</h1>
<div class = "ourColor bigText">Some big blue text.</div>
<div class = "ourColor ourBorder">Some blue text with blue border.</div>

Это позволяет вам повторно использовать класс ourColor без необходимости многократно определять цвет в вашем CSS. Если вы измените тему, просто измените правило для нашего цвета.

Это может показаться безумием, но если вы используете NAnt (или Ant или другую автоматизированную систему сборки), вы можете использовать свойства NAnt в качестве переменных CSS хитрым способом. Начните с файла шаблона CSS (возможно, styles.css.template или что-то в этом роде), содержащего что-то вроде этого:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

А затем добавьте в свою сборку шаг, который присваивает всем значениям свойств (я использую внешние файлы сборки и <include> их) и использует фильтр <expandproperties> для генерации фактического CSS:

<property name = "colors.blue" value = "#0066FF" />
<property name = "colors.blue.light" value = "#0099FF" />
<property name = "padding.normal" value = "0.5em" />

<copy file = "styles.css.template" tofile = "styles.css" overwrite = "true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

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

Однако вы можете написать функции NAnt, чтобы делать всевозможные классные вещи, помимо расширения свойств (например, динамическое создание файлов изображений градиента), поэтому для меня это стоило головной боли.

CSS (пока) не использует переменные, что понятно для его возраста и является декларативным языком.

Вот два основных подхода к достижению более динамичной обработки стилей:

• Серверные переменные во встроенном css
  Пример (с использованием PHP):

  <style> .myclass{color:<?php echo $color; ?>;} </style>

• Манипуляции с DOM с помощью javascript для изменения css на стороне клиента Примеры (с использованием библиотеки jQuery):

  $('.myclass').css('color', 'blue');

  OR

  //The jsvarColor could be set with the original page response javascript
// in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

Я написал макрос (в Visual Studio), который позволяет мне не только кодировать CSS для именованных цветов, но и легко вычислять оттенки или смеси этих цветов. Он также обрабатывает шрифты. Он запускается при сохранении и выводит отдельную версию файла CSS. Это соответствует Аргумент Берта Боса, что любая обработка символов в CSS происходит на этапе разработки, а не на этапе интерпретации.

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

Цели этого подхода заключаются в следующем:

1. Разрешить центральное определение основных цветов, шрифтов и т. д., Чтобы можно было легко настроить всю палитру или типографское оформление без необходимости использовать поиск / замену

2. Избегайте сопоставления расширения .CSS в IIS

3. Создание разнообразных текстовых CSS-файлов, которые можно использовать, например, в режиме разработки VisualStudio.

4. Создавайте эти файлы один раз во время разработки, а не пересчитывайте их каждый раз при запросе файла CSS.

5. Создавайте эти файлы мгновенно и прозрачно, не добавляя дополнительных действий в рабочий процесс настройки, сохранения и тестирования.

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

XML-файл, содержащий определения цвета и шрифта, должен называться Constants.xml и должен находиться в той же папке, что и файлы CSS.

Метод ProcessCSS запускается EnvironmentEvents всякий раз, когда VisualStudio сохраняет файл CSS. Файл CSS раскрывается, и расширенная статическая версия файла сохраняется в папке / css / static /. (Все HTML-страницы должны ссылаться на / css / static / версии файлов CSS).

Файл Constants.xml может выглядеть примерно так:

<?xml version = "1.0" encoding = "utf-8" ?>
<cssconstants>
  <colors>
    <color name = "Red" value = "BE1E2D" />
    <color name = "Orange" value = "E36F1E" />
    ...
  </colors>
  <fonts>
    <font name = "Text" value = "'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name = "Serif" value = "Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

В файле CSS вы можете иметь такие определения, как:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Вы можете добиться этого и многого другого, используя Меньше CSS.