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

вы можете достичь этого и многое другое с помощью меньше CSS.

нет, но Сасс это. Это препроцессор 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 для вас, но есть также компилятор общего назначения, который может сделать это для вас по требованию.

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

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

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

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

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

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

Вы делаете это слишком сложно. Именно по этой причине каскад существует. Просто предоставьте свои селекторы элементов и класс вашего цвета:

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>

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

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

---

цели этого подхода следующие:

1. разрешить базовые цвета, шрифты и т. д. для определения в центральном месте, так что весь паллет или типографской обработки можно легко настроить без использования поиска/замены

2. избежать карта то .Расширение CSS в IIS

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

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

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

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

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

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

Константы.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. Как сказал Фаринья, предложение переменных CSS было сделано, но на данный момент Вы хотите использовать препроцессор.

вы можете использовать классы mutliple в атрибуте класса элемента 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 без необходимости определять цвет mulitple раз в вашем CSS. Если вы измените тему, просто измените правило для ourColour.

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

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

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

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

а затем добавьте шаг к вашей сборке, который присваивает все значения свойств (я использую внешние файлы сборки и их) и использует фильтр для создания фактического 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');

  или

  //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);