Променливи в CSS: какво можем да съхраняваме в тях?

Какво представляват променливите в програмирането?

Ако тепърва навлизаш в програмирането, може би си срещал думата “променлива” и си си казал “Добре, ама какво точно значи това?” Спокойно — не е страшно.

Можеш да си представиш променливата като кутия с етикет, в която съхраняваме някаква стойност — например цвят, размер, текст. Всеки път когато искаме да използваме тази стойност, вместо да я пишем отново и отново, просто казваме “дай ми стойността от кутията с етикет --main-color”.

Това прави кода по-чист, по-лесен за поддръжка и супер удобен, ако искаш да направиш промяна на едно място и тя автоматично да се отрази навсякъде.

Ето как би изглеждало това в най-обща форма (в CSS стил):

:root {
  --main-color: #ff69b4;
}

.button {
  background-color: var(--main-color);
}

Ако някой ден решиш, че искаш бутонът ти да е в друг цвят — просто сменяш стойността на --main-color и готово.

Накратко:

• Променливите съхраняват стойности.
• Дават ни гъвкавост и спестяват време.
• Има ги във всички езици за програмиране, включително и в CSS.

Защо изобщо има променливи и в CSS

Дълго време писането на CSS означаваше буквално да копираш и повтаряш стойности — един и същ цвят на 100 места, едни и същи разстояния, шрифтове и т.н. Ако решиш да смениш основния цвят на сайта си, това можеше да значи да търсиш и сменяш десетки редове на ръка.

Години наред ние, разработчиците, искахме начин да използваме повторно стойности в CSS, както се прави в други езици (например JavaScript). Решения като Sass, LESS и други CSS препроцесори започнаха да запълват тази празнина — те позволиха използване на „променливи“, но извън т.нар. vanilla CSS. Тоест, за да ги използваш, трябваше да компилираме кода си.

През 2015 г. (със спецификацията CSS Custom Properties) официално бяха въведени променливи директно в CSS — без нужда от допълнителни инструменти.

Това донесе няколко ключови предимства:

• работят директно в браузъра
• поддържат динамична промяна (например тема, базирана на user preference)
• могат да се използват във вложени структури и media query-та

С две думи: CSS променливите дойдоха, за да направят живота ни по-лесен.

Как се създават и използват CSS променливи?

Както ти казах по-горе, CSS променливите (или „custom properties“) са като кутийки, в които можем да съхраняваме стойности, които често повтаряме — цветове, размери, дори цели шрифтови декларации. Това ни помага да пишем по-чист и гъвкав код.

Създаване на променлива: синтаксис

Променливите винаги започват с две тирета (--) и се създават с обикновена CSS декларация:

--main-color: #f06;

Но! Това няма да направи нищо, докато не я „включим“ в някакъв селектор. Например:

:root {
  --main-color: #f06;
}

Така вече казваме: „Имам глобална променлива с име --main-color, чиято стойност е #f06.“

Къде се декларират?

В :root — така променливата става глобална и може да се използва навсякъде в документа. :root е просто селектор за най-горния елемент (обикновено html), но е по-специфичен и практичен за този случай.

:root {
  --font-size-base: 1rem;
}

В селектор — така променливата е локална и може да се използва само вътре в този селектор.

.card {
  --card-padding: 2rem;
}

В media query-та — чудесно за адаптивен дизайн! Променяме стойности според широчината на екрана, без да презаписваме стилове навсякъде.

@media (max-width: 600px) {
  :root {
    --font-size-base: 0.875rem;
  }
}

Използване на променлива

За да използваме вече дефинирана променлива, използваме функцията var():

color: var(--main-color);

Можем дори да добавим fallback стойност — какво да се използва, ако променливата по някаква причина липсва:

color: var(--main-color, #000);

Какво можем да съхраняваме в CSS променливи?

✅ цветове (hex, rgba, hsl)

✅ размери (px, rem, %, vw, vh)

✅ шрифтове (font-family)

✅ интервали (margin, padding, gap)

✅ z-index стойности

✅ текстове (пример с content: var(--tooltip-text);)

⚠️ Какво не можем — напр. изчисления директно вътре, селектори и свойства

Практически пример: създаване на тема със CSS променливи

Нека направим нещо, което наистина можеш да използваш — ще създадем бутон, който използва CSS променливи за цвят и разстояния. И после ще покажем как да направим тъмна и светла тема, като просто добавим клас към <body>.

Какво се случва в този пример?

1. Създаваме променливи в :root:
   Това са нашите базови цветове и стойности, които ще се използват като тема по подразбиране — светла тема.
2. Добавяме алтернативни стойности в .dark-theme:
   Когато добавим този клас към body, променливите се презаписват. Това автоматично променя външния вид на всички елементи, които ги използват.
3. Стилизиране с променливи: И бутонът за действие, и бутонът за смяна на тема използват CSS променливи. Така при смяна на темата, стиловете им се адаптират без да се налага да пишем отделни селектори.
4. Превключване на темата с JavaScript: Когато потребителят кликне върху бутона „Смени тема“, към <body> се добавя или премахва класът .dark-theme. Това задейства смяната на променливите и цялата тема се сменя мигновено.

Така можеш да използваш същата логика, за да стилизираш цели компоненти — карти, навигация, форми и др., и да създаваш неограничен брой теми само с няколко реда CSS.

Заключение

CSS променливите са едно от онези малки неща, които променят играта. Дават ти повече контрол, гъвкавост и чистота в кода — особено когато работиш по по-големи проекти или искаш лесно да добавиш различни теми и вариации.

С тях можеш да мислиш в дизайн системи, да избягваш дублиране и да правиш промени глобално само с един ред. А най-хубавото? Достъпни са директно в CSS — без нужда от препроцесори или сложни инструменти.

Ако до момента не си използвал/а CSS променливи, сега е перфектният момент да ги вкараш в проектите си. Пробвай с един бутон, после с цял компонент… и ще се чудиш как си писал/а без тях!