Ответ 1

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

Так же:

.darkBackground {
   background: #123456;
}

.smallText {
   font-size:8pt;
}

Это также помогает знать, что элемент может иметь несколько классов, поэтому вы можете разбить значения элемента "Constant" на отдельные классы и применять более одного по мере необходимости.

<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>

Ответ 2

Не с простым CSS, но есть некоторые расширения CSS, которые вы могли бы использовать, например SASS или less-css.

Здесь пример менее css:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Ответ 3

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

И это при использовании простого CSS (и tbh, не так элегантно, как при использовании SASS или lessCSS), но он работает для целей простого CSS. Прежде всего, определите фактическую переменную в блоке :root. Вы можете определить его, например, в блоке p (или в любом другом месте), но он будет доступен только в этом блоке. Поэтому, чтобы убедиться, что он доступен глобально, поместите его в корневой блок:

:root {
  --custom-color: #f0f0f0;
}

И используя метод var (без метода var он не будет преобразован как фактическая ссылка), вы можете ссылаться на него позже:

p{
    color: var(--custom-color);
}

Поскольку блок :root является (как и все другие объявления CSS) полностью функциональным блоком, который ссылается на элементы, вы не можете объявить что-то вроде:

:root{
    color: #00ff00;
}

Это будет ссылаться на атрибут цвета каждого элемента и установить его (в этом примере) #00ff00. Каждое имя переменной, которое вы объявляете, должно начинаться с --, что означает, что вы можете сделать:

:root{
    --color: #00ff00;
}

И снова, если можете, используйте что-то вроде SASS или lessCSS. Возможность объявить их, написав @color = #fff * и @color *, намного проще, чем работать с простым CSS и использовать ключевое слово var каждый раз, когда вы хотите получить доступ к пользовательскому свойству.

И вы можете получить доступ к встроенному CSS с помощью JS, чтобы получить и/или изменить свойства:

//Inline CSS
element.style.getPropertyValue("--custom-color");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--custom-color");

// set variable on inline style
element.style.setProperty("--custom-color", "#f0f0f0");

НОТА!

Это недавно добавленная функция, поэтому важно проверить совместимость браузера. Особенно на firefox стоит обратить особое внимание, так как он имеет пробел между введением самих объявлений переменных и метода var(). В настоящее время caniuse оценивает 91,65% пользователей, использующих браузер с поддержкой этого метода. И это также стоит отметить, что IE не делает вообще.

_{* с lessCSS это @color, с SASS это $color}

Ответ 4

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

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

Ответ 5

В CSS вы можете объявить свою константу в: root-блоке:

:root {
  --main-bg-color: #1596a7;
}

и используя метод var():

.panel-header {
    background: var(--main-bg-color);
    color: ....
}

Ответ 6

Используйте SASS или less.

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

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

Ответ 7

Вы можете использовать переменные Sass:

$color: #4D926F;

.someclass{
  color: $color;
}

Ответ 8

Предложения интересны для чтения - спасибо.

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

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

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

Ответ 9

Вы можете иметь константы в файле CSS, объявляя их следующим образом:

*{
 -my-lightBlue: #99ccff;
 -my-lightGray: #e6e6e6;
}

Затем вы можете использовать их в файле CSS следующим образом:

.menu-item:focused {
  -fx-background-color: -my-lightBlue;
}

После этого вы можете использовать их программно следующим образом:

progressBar.setStyle("-fx-accent: -my-lightBlue;");

Ответ 10

Стандартный способ сделать это - PHP. Добавьте инструкции #define в начале вашего файла CSS, например

#define COLORNAME: #123456;

Вместо того, чтобы ссылаться на файл CSS в заголовке вашего HTML файла, запустите PHP script в этом месте. script загружает файл CSS, заменяет все вхождения COLORNAME на #123456 и передает клиенту исправленный текст с помощью echo или print.

В качестве альтернативы вы можете загрузить исходный файл (также используя PHP), использовать PHP для создания файла CSS один раз, когда все вхождения #defines будут заменены, и использовать этот файл в вашем HTML. Это более эффективно, поскольку вы выполняете преобразование только один раз, при загрузке, а не каждый раз, когда вы загружаете HTML файл.