Могу ли я создавать пользовательские определения цветов, которые я могу использовать между CSS, JS и HTML?

Ответ 1

Очень перспективный продукт, который "компилирует" выражения более высокого уровня, такие как переменные в CSS, LESS. Это нужно Руби. Я еще не использовал его, но это определенно стоит посмотреть.

Более примитивный способ сделать это будет использовать серверный скриптовый язык, такой как PHP.

Вы определяете константы в PHP так:

define ("MYBLUE", "#33CC99");

а затем выведите значение, когда необходимо, с помощью <?=MYBLUE;?>

Большой недостаток. Чтобы сделать это во внешних файлах css и js, вам, очевидно, нужно было бы их проанализировать с помощью интерпретатора PHP, что не очень хорошо оценивается, если у вас много посетителей. Для сайта с низким трафиком это, вероятно, не имеет значения.

Ответ 2

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

tag.style.backgroundColor = <? echo $myblue; ?>

а также в CSS

.someClass {
  background-color: <? echo $myblue ?>
}

или что-то подобное. И это тоже не очень приятно. Конечно, вы можете использовать любой серверный script язык по вашему выбору. Насколько я могу судить, это единственная возможность использовать постоянную цвета на всем веб-сайте.

Вы можете посмотреть на некоторые процессоры:

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/

Ответ 3

Вы можете посмотреть HAML + SASS. Хотя вы не можете определить переменные для всех трех языков одновременно, эти два могут упростить запись HTML + CSS.

Ответ 4

Как бы я хотел это сделать, это сделать класс в моем CSS.

.color_class {color: #33CC99;}

Затем вызовите его в моем HTML

<td class="color_class" />

Вы можете назначить несколько классов элементу HTML.

В JS просто назовите класс

document.getElementById('id').className = 'color_class';

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

Ответ 5

Чтобы достичь этого, используя любой динамический CSS (например, служащий файлу PHP с типом контента text/css), лучше всего выделить разделы, в которых вы определяете тему.

<script type="text/javascript">
   var theme = '#003366';
 </script>

Затем вы можете использовать файл JavaScript для записи стилей на основе тем.

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

Ответ 6

Как отмечают другие пользователи, вы не можете сделать это в прямом HTML, JS или CSS, если вы не передадите весь контент HTML, JS и CSS через CGI/PHP/ASP script - который на самом деле не плохой подход как это легко поддерживать.

Если вы используете строку запроса в ссылке на включенные файлы CSS/JS - например, '/css/stylesheet.php?timestamp=2010-01-01+00:00:00', тогда почти все клиенты будут агрессивно кэшировать ваши файлы CSS/JS, отрицая какое-либо влияние на синтаксический анализ загрузки на языке сценариев, возможно, хотя, если сайт, скорее всего, будет особенно занят, я не буду слишком связан с этим).

Если вы используете Apache (что вполне вероятно), альтернативный подход будет использовать что-то вроде mod_set, чтобы переписать все HTML, JS и CSS файлы на лету для вас. Это может быть сложнее поддерживать, если вы не знакомы с настройкой Apache (или используете другой веб-сервер).

Что касается именования тегов:

В любом из подходов я решительно рекомендую использовать четкую систему тегов для обозначения ваших динамических переменных (например,% MyBlue%) и рассмотреть возможность отображения имен переменных (например,% HeadingBackgroundColor%,% FontColor%, даже если для обоих установлено значение% MyBlue%), так как это может помешать тому, чтобы потом получилось волосатое (когда вы обнаружите, что изменение одного значения имеет предполагаемые последствия).

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

Ответ 7

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

Ответ 8

Я не уверен в твоей конечной цели. Если разрешить выбор одной из нескольких тем для веб-страницы, вы можете просто иметь несколько файлов CSS, а таблица файлов cookie/сеанс/хранилище данных пользователя предпочитает таблицу стилей. Тогда вы могли бы просто сделать

 <link rel=<? echo stylepref; ?> type='text/css'>

или что-то в этом роде

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

Ответ 9

В CSS нет понятия "переменных", но я настоятельно рекомендую не делать то, что вы делаете. нет никакой веской причины, по которой вы не можете определить всю свою информацию о стиле в своем листе CSS как классы CSS. Если вы это сделаете, а затем просто примените указанные классы в html и javascript, это один большой откат с точки зрения копирования и вставки.

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

<div class='blue-text white-background'>my content</div>

Затем вы можете определить их самостоятельно в CSS, a la:

.blue-text { color : Blue; }
.white-background { background-color: white;}

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

.blue-text.white-background { color : AliceBlue; }

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

Ответ 10

На чистых клиентских сайтах селектор группировки CSS позволяет вам размещать один и тот же цвет на разных элементах:

p, .red, #sub, div a:link { color: #f00; }