Я використовую кілька кольорів у своїй таблиці стилів CSS. Наприклад,

#testdiv{
  background: #123456;
}

Чи можна визначити цей колір за іменем, щоб я міг посилатися на нього в аркуші CSS, як показано нижче?

#testdiv{
  background: COLORNAME;
}

Можливо, є кращою практикою визначати клас CSS і використовувати його повторно для кожного елемента, якому потрібно призначити колір, а не кодувати його для певного елемента.

Подобається так:

.darkBackground {
   background: #123456;
}

.smallText {
   font-size: 8pt;
}

Також допомагає знати, що до елемента може бути застосовано кілька класів, тому ви можете розділити свої значення "Постійні" на окремі класи та застосувати більше одного за потребою.

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

Не з простим CSS, але є деякі розширення CSS, якими ви могли б скористатися, наприклад Sass або менше-css .

Ось приклад Менше CSS:

@color: #4D926F;

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

Так, використання класів - хороший підхід, але тепер можна оголошувати змінні в CSS. І змінні (особливо кольорові) неймовірно корисні, коли ви оголошуєте той самий колір (той, де вам потрібно шістнадцяткове значення, якщо ви використовуєте інтегрований колір, це насправді не так важливо).

І це використання звичайного CSS (і tbh, не настільки елегантного, як використання SASS або менше CSS), але воно працює для цілей звичайного CSS. Спочатку визначте фактичну змінну в :rootблоці. Ви можете визначити його, наприклад, також у pблоці (або в будь-якому іншому випадку), але він буде доступний лише в цьому блоці. Отже, щоб переконатися, що він доступний у всьому світі, помістіть його в кореневий блок:

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

А використовуючи varметод (без методу var він не буде вирішений як справжнє посилання), ви можете потім посилатися на нього пізніше:

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

Оскільки :rootблок (як і всі інші оголошення CSS) є повністю функціонуючим блоком, який посилається на елементи, ви не можете оголосити щось на зразок:

:root{
    color: #00ff00;
}

Це посилалося б на атрибут кольору кожного окремого елемента та встановлювало б його (у цьому прикладі) #00ff00. Кожне ім'я змінної, яке ви оголошуєте, повинно починатися з --, тобто ви можете робити:

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

І знову, якщо можете, використовуйте щось на зразок SASS або менше CSS. Можливість оголосити їх, написавши @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 взагалі ні.

_{* з меншим CSS це @color, з SASS це$color}

Є кілька пропозицій щодо цього, тому це може відбутися найближчим часом, але, наскільки я знаю, ще нічого не стандартизовано.

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

У CSS ви можете оголосити свою константу в : root блок:

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

А за допомогою методу var ():

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

Ви можете використовувати змінні Sass :

$color: #4D926F;

.someclass{
  color: $color;
}

Використовуйте Sass або менше .

На сьогоднішній день використання попередніх процесорів, як зазначено вище, є загальноприйнятою практикою для кращого робочого процесу з розробки.

Це допомагає вам бути більш організованими, і такі функції, як змінні або комбінації, є одними з причин, з якими їх варто враховувати.

Ви можете мати константи у CSSфайлі, оголошуючи їх так:

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

Тоді ви можете використовувати їх у файлі CSS таким чином:

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

Після цього ви можете використовувати їх програмно так:

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

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

#define COLORNAME: #123456;

Замість того, щоб посилатися на файл CSS в голові вашого файлу HTML, запустіть PHP-скрипт у цьому місці. Сценарій завантажує файл CSS, замінює всі випадки COLORNAMEby #123456та передає виправлений текст клієнту за допомогою echoабо print.

Крім того, ви можете завантажити вихідний файл (також за допомогою PHP), використати PHP для створення файлу CSS один раз, де всі входження #defines замінені, і використовувати цей файл у своєму HTML. Це ефективніше, оскільки ви виконуєте перетворення лише один раз під час завантаження, а не кожного разу, коли завантажуєте файл HTML.