Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

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

Достъпът до DOM ви позволява да създавате променливи, да ги съхранявате и да ги използвате повторно във вашия стилов лист.

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

За да направите своите таблици със стилове по-подредени, поддържаеми и многократно използвани, можете да използвате CSS променливи във всяко свойство, което приема стойност.

Вземете следния пример за HTML файл и CSS файл, който не използва CSS променливи.

HTML:

html>
<htmlезик="bg">
<глава>
<заглавие>CSS променливи - варианти на бутонизаглавие





instagram viewer

>
<връзкаотн="стилов лист"href="Променливи.css" />
глава>
<тяло>
<див>
<h1>CSS променливиh1>
<див>

CSS:

.btn {
подплата: 1рем 1.5rem;
 фон: прозрачен;
 тегло на шрифта: 700;
 цвят: червен;
}

Ето как трябва да изглежда вашата страница:

The .btn класът, използван в горния стилов лист, не е динамичен и ви кара да създадете отделен клас за персонализиране на отделни бутони. Създаването на красиви уебсайтове изисква да бъдете динамични със своя стил на предния край. Внедряването на бутони по този начин просто ще направи тази задача трудна за изпълнение.

Както повечето езици за програмиране, трябва да инициализирате и замените CSS променливи.

За да инициализирате CSS променлива, добавете префикс към името на променливата с двойни тирета:

: корен{
/*CSS променлива*/
--име_на_променлива: стойност;
}

Можете да инициализирате променлива навсякъде, но имайте предвид, че ще можете да използвате тази променлива само в инициализирания селектор. Поради това CSS променливите обикновено се инициализират вътре в главния селектор. Това е насочено към елемента от най-високо ниво на DOM и позволява променливите да бъдат достъпни от целия HTML документ в глобален мащаб.

За да замените променливата във вашия CSS стил, ще използвате var() Имот:

: корен {
/*CSS променлива*/
 --основен: #900c3f;
 --втори: #ff5733;
}
.btn {
подплата: 1рем 1.5rem;
 фон: прозрачен;
 тегло на шрифта: 700;
 цвят: вар(--основен);
 Цвят на фона: вар(--втори);
}
.подначален {
 цвят: вар(--втори);
 Цвят на фона: вар(--основен);
}

Основният селектор съдържа две променливи: --основен и --втори. След това и двете променливи се заместват в .btn клас съответно като цвят и цвят на фона.

Използвайки променливите, можете да стилизирате отделни елементи много по-лесно. Като използвате повторно променливи, можете бързо да промените стойност веднъж, за да я актуализирате във всеки екземпляр.

The var() свойството може да приеме и втори аргумент. Този аргумент действа като резервна стойност за първия аргумент в ситуация, в която първият не е дефиниран или е невалиден.

Например:

: корен {
 --основен: #900c3f;
 --втори: #ff5733;
}
.btn {
подплата: 1рем 1.5rem;
 фон: прозрачен;
 тегло на шрифта: 700;
 цвят: вар(-основен, син);
}

В този пример заменете с --основен променлива в цвят стил. Ако по някаква причина тази стойност е неуспешна, стиловият лист ще използва втората стойност като резервна. Можете също да използвате друга CSS променлива като резервна стойност.

Манипулиране и замяна на CSS променливи с JavaScript

Манипулирането на CSS променливи с помощта на JavaScript може да бъде мощен начин да промените външния вид и усещането на вашия уебсайт в движение. С помощта на JavaScript можете да актуализирате стойностите на тези променливи и да видите промените, отразени във вашия сайт.

Важно е да се отбележи, че промените, направени с JavaScript, ще се прилагат само за текущата сесия. Трябва или да актуализирате оригиналния източник, или съхранява новата стойност на клиента, като в бисквитка, за да запазите промените.

Ето пример как да използвате JavaScript за актуализиране на стойността на CSS променлива.

HTML:

html>
<htmlезик="bg">
<глава>
<заглавие>CSS променливи - варианти на бутонизаглавие>
<връзкаотн="стилов лист"href="Променливи.css" />
<сценарий>
функцияchangeColor() {
// Вземете елемента, на който искате да промените променливата
конст myElement = документ.querySelector(":корен");
// Получаване на текущата стойност на променливата
позволявам currentValue = getComputedStyle (myElement).getPropertyValue(
"--втори"
 );
 // Комплект на новстойностза на променлива
myElement.стил.setProperty("--втори", "#DAF7A6");
 }
сценарий>
глава>
<тяло>
<див>
<h1>CSS променливиh1>
<див>

CSS:

: корен {
 --основен: #900c3f;
 --втори: #ff5733;
}
.btn {
подплата: 1рем 1.5rem;
 фон: прозрачен;
 тегло на шрифта: 700;
}
.подначален {
 цвят: вар(--основен);
 Цвят на фона: вар(--втори);
}

В този JavaScript код, changeColor() функцията актуализира цвета на първия бутон, когато потребителят щракне върху него.

Използвайки Методи за обхождане на DOM, можете да получите достъп до класовете или селекторите, приложени във вашия HTML документ, и да манипулирате стойностите.

Преди да щракнете върху бутона:

След натискане на бутона:

Можете също да използвате JavaScript, за да създадете нови CSS променливи или да ги премахнете напълно.

Например:

// Създавайте а новпроменлива
документ.documentElement.style.setProperty('--нов цвят', 'син');
// Премахване на променлива
документ.documentElement.style.removeProperty('--нов цвят');

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

Използването на променливи в рамките на фронтенд технологията първоначално беше постигнато с CSS препроцесори като SASS, LESS и Stylus.

Целта на CSS препроцесорите е да разработят код, който разширява основните възможности на стандартния CSS. След това накарайте този код да бъде компилиран в стандартен CSS, за да може браузърът да го разбере, подобно на как TypeScript работи с JavaScript.

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

Можете да дефинирате SASS променлива $ основен цвят и го използвайте, за да зададете стойността на CSS променлива. След това използвайте CSS променливата в обикновен стилов клас.

Можете също да използвате SASS функции, за да манипулирате стойностите на CSS променливите.

Например:

: корен {
 --основен: $ основен цвят;
 --вторичен: олекотява(вар(--основен), 20%);
}
.btn {
 цвят: вар(--основен);
 Цвят на фона: вар(--втори);
}

Ето функцията SASS олекотявам() манипулира стойността на --основен за да получите стойност за --втори.

Имайте предвид, че SASS променливите не са достъпни от JavaScript. Така че, ако трябва да манипулирате стойностите на вашите променливи по време на изпълнение, трябва да използвате CSS променливи.

Използвайки заедно CSS променливи и препроцесори, можете да се възползвате и от двете предимства, като например използването мощни функции на препроцесора като цикли и функции и функции на CSS променливи като CSS каскадно.

Съвети за използване на CSS променливи в уеб разработката

Ето няколко важни съвета, които трябва да имате предвид, които ще ви помогнат да използвате CSS променливите по-добре.

Започнете с ясна конвенция за именуване

Изберете конвенция за именуване на вашите променливи, която ги прави лесни за разбиране и използване. Например, използвайте префикс като --цвят- за цветови променливи или --интервал- за интервални променливи.

Използвайте променливи в медийни заявки, за да улесните коригирането на вашия дизайн за различни размери на екрана.

Възползвайте се от каскадната природа на CSS

Не забравяйте, че CSS променливите са каскадни, което означава, че ако зададете променлива на родителски елемент, това ще засегне всички негови деца.

Използвайте CSS променливите с повишено внимание

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

Тествайте вашите променливи

CSS променливите са уникален начин да напишете ясен и поддържаем код във вашия лист със стилове.

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