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

У меня есть цвет синего выхода, который я хочу использовать во многих местах в моем приложении, и в данный момент я копирую и вставляю его между стилями в моем CSS. Существует ли способ определить константу как стандартные цвета, 'синие', 'красные' и т.д., что я мог совместно использовать между своим CSS, своим HTML и своим JS?

Я хотел бы иметь возможность сказать (где-нибудь, предпочтительно CSS)

myblue = #33CC99

в CSS говорят...

background-color:myblue;

в HTML говорят...

<td color="myblue"/>

и в JavaScript

tag.style.backgroundColor = myblue;

Я предполагаю, что это невозможно, и Google ничего не поднял, таким образом, кто-либо получил какие-либо идеи? Я сомневаюсь, что я - единственный человек для случайной встречи с этим.

11
задан Simon 18 January 2010 в 17:02
поделиться

9 ответов

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

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

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

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

, а затем вывод значения, где это необходимо использовать

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

6
ответ дан 3 December 2019 в 09:20
поделиться

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

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

, а также в CSS

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

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

Вы можете взглянуть на некоторые процессоры:

3
ответ дан 3 December 2019 в 09:20
поделиться

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

3
ответ дан 3 December 2019 в 09:20
поделиться

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

.color_class {color: #33CC99;}

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

<td class="color_class" />

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

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

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

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

2
ответ дан 3 December 2019 в 09:20
поделиться

для достижения этого с использованием любых динамических CSS (например, служа Файл PHP с типом контента Text / CSS ), ваша лучшая ставка - отделить места, где вы определяете «тему».

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

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

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

0
ответ дан 3 December 2019 в 09:20
поделиться

Как отметили, вы не можете сделать это в прямых HTML, JS или CSS, если вы не передадите все HTML, JS и CSS-контент через сценарий CGI / PHP / APP - который ISN ' t На самом деле плохой подход, так как его легко поддерживать.

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

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

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

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

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

0
ответ дан 3 December 2019 в 09:20
поделиться

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

0
ответ дан 3 December 2019 в 09:20
поделиться

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

Продление спринта - это рецепт катастрофы для меня. Означает ли завершение функции разрешение всех ошибок на ней? Когда-нибудь видели программное обеспечение, у которого не было ошибок?

Неудача спринта привносит в вещи слишком много перфекционизма. Что-то, что на 99% сделано бесполезно? Я бы так не подумал, но есть люди, которые имеют действительно высокие стандарты и могут быть довольно требовательными.

EDIT: Иногда функция изначально дается с расплывчатыми требованиями, которые уточняются в ходе спринта. Например, запрос функции «Как пользователь, я хотел бы разместить заказ» может быть разбит на части как часть планирования спринта, так и во время спринта. В любом случае, если некоторые истории, связанные с функцией, сделаны, они могут и должны быть представлены в демонстрационной версии, если она сделана. Это точка, чтобы иметь возможность сказать: "Вот где мы находимся. Насколько приоритет в том, чтобы закончить это? "как то, что могло быть срочным раньше, может быть не так в конце спринта.

-121--3279205-

Нет, вы в значительной степени покрыли его. Переменная экземпляра принадлежит экземпляру класса, локальная переменная принадлежит фрейму стека.

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

-121--2590289-

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

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

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

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

0
ответ дан 3 December 2019 в 09:20
поделиться

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

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

<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 и обслуживания вашего языка выбора.

-1
ответ дан 3 December 2019 в 09:20
поделиться
Другие вопросы по тегам:

Похожие вопросы: