Возможный дубликат:
Избегание повторяющихся констант в CSS
У нас есть некоторые "цвета тем", которые повторно используются в нашем листе CSS.
Есть ли способ установить переменную, а затем повторно использовать ее?
например.
.css
OurColor: Blue
H1 {
color:OurColor;
}
Нет необходимости, чтобы все стили для селектора находились в одном правиле, и одно правило может применяться к нескольким селекторам... так что переверните его вокруг:
/* 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, чтобы избежать повторения ценности, рискуя превратить будущие изменения в стиль невероятно подверженного ошибкам; всегда сосредотачивайтесь на контекстуальном значении стилей, пытаясь уменьшить повторение, игнорируя их текущие значения.
Вы можете достичь этого и многое другое, используя Less CSS.
Ты не первый, кто задавался вопросом, а ответ - нет. У Эллиотта есть приятное написание: 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;
}
}
Там больше: mixins, которые действуют как подобные функции, и способность наследовать один селектор от другого. Это очень умно и очень полезно.
Если вы кодируете Ruby on Rails, он даже автоматически скомпилирует его для CSS для вас, но также компилятор общего назначения, который может сделать это для вас по запросу.
CSS не предлагает такой вещи. Единственное решение - написать предварительную обработку script, которая либо запускается вручную для создания статического CSS-вывода на основе некоторого динамического псевдо-CSS, либо подключается к веб-серверу, и препроцессы CSS перед отправкой его клиенту.
Это не поддерживается в настоящий момент, если вы не используете какой-либо script для создания CSS на основе определенных вами переменных.
Похоже, что по крайней мере некоторые люди из мира браузера работают над ним. Итак, если это действительно станет стандартом в будущем, тогда нам придется подождать, пока он не будет реализован во всех браузерах (до тех пор он будет недоступен).
Так как CSS не имеет этого (еще, я полагаю, следующая версия будет), следуйте совету Konrad Rudolphs для препроцессов. Вероятно, вы захотите использовать тот, который существует allready: m4
Вы делаете это слишком сложно. Вот почему каскад существует. Просто укажите свои селектора элементов и введите свой цвет:
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. Это соответствует аргументу Bert Bos, что любая обработка символов в CSS происходит в точке авторства, а не в точке интерпретации.
Полная настройка вместе со всем кодом будет слишком сложной для публикации здесь, но может быть подходящей для сообщения в блоге по дороге. Вот часть комментария из макроса, которой должно быть достаточно, чтобы начать.
Цели такого подхода заключаются в следующем:
Разрешить определение базовых цветов, шрифтов и т.д. в центральном расположении, чтобы можно было легко настроить полную палитру или типографскую обработку без использования поиска/замены
Избегайте сопоставления расширения .CSS в IIS
Создайте CSS файлы с текстом в саду, которые можно использовать, например, в режиме разработки VisualStudio
Создайте эти файлы один раз во время разработки, а не пересчитывайте их каждый раз, когда запрашивается файл CSS.
Создавайте эти файлы мгновенно и прозрачно, не добавляя дополнительных шагов в рабочий процесс tweak-save-test
При таком подходе цвета, оттенки цветов и семейства шрифтов представлены сокращенными жетонами, которые ссылаются на список значений в файле XML.
XML файл, содержащий определения цвета и шрифта, должен называться Constants.xml и должен находиться в той же папке, что и файлы CSS.
Метод ProcessCSS запускается EnvironmentEvents всякий раз, когда VisualStudio сохраняет файл CSS. Файл CSS расширяется, а расширенная статическая версия файла сохраняется в папке /css/static/. (Все HTML-страницы должны ссылаться на/css/статические/версии файлов 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. Как сказал Фаринья, предложение CSS Variables было сделано, но пока вы хотите использовать препроцессор.
Вы можете использовать mutliple классы в атрибуте 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 пока не использует переменные, которые понятны для его возраста и являются декларативным языком.
Вот два основных подхода для более динамичного управления стилями:
<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);