1.1 CSS-də dəyişənlər nədir?
CSS-dəyişənləri, həmçinin custom properties kimi də tanınır, bu, CSS-də elan olunan və dəyərləri, məsələn, rəngləri, ölçüləri, şriftləri və digər CSS-attributlarını saxlamaq üçün istifadə edilən dəyişənlərdir. Bu, veb səhifələrdəki üslubların elastikliyini və texniki dəstəyini artırmaq üçün effektiv imkanlar təqdim edir.
CSS-də dəyişənlər nədir?
CSS-dəyişənləri — bu dəyişənlər CSS xassələrinin dəyərlərini saxlaya və üslubların müxtəlif hissələrində təkrar istifadə edilə bilər. Onlar iki defis (--) ilə müəyyən edilir və istənilən selektorda təyin edilə bilər, lakin tez-tez onları kök selektorunda :root müəyyən edirlər ki, sənədin hər yerində əlçatan olsun.
Nümunə:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
CSS-dəyişənlərin əsas xüsusiyyətləri:
- Təkrar istifadə: CSS-dəyişənləri dəyəri bir dəfə təyin etməyə və onu CSS kodunun müxtəlif yerlərində təkrar istifadə etməyə imkan verir. Bu, təkrarlanmadan qaçmağa və üslubların idarə edilməsini asanlaşdırmağa kömək edir.
- Elastiklik: CSS-dəyişənlərin dəyərləri elementin vəziyyəti və ya media-sorğular kimi şərtlərdən asılı olaraq dəyişə bilər. Bu, daha adaptiv və dinamik üslublar yaratmağa imkan verir.
- İrəliləyiş: CSS-dəyişənlər valideyn elementlərdən övlad elementlərə irsən keçir, bu da üslubların idarə edilməsini və təşkilini asanlaşdırır.
- İdarəetmə: dəyişənlərin istifadəsi kodun saxlanmasını asanlaşdırır, çünki dəyişənlərin dəyərlərində edilən dəyişikliklər avtomatik olaraq bu dəyişənləri istifadə edən bütün elementlərdə əks olunur.
1.2 CSS dəyişənlərinin istifadəsi nümunələri
JavaScript-də CSS dəyişənlərinin istifadəsi nümunəsi:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Nümunə 1: Dəyişənlərin təyin edilməsi və istifadəsi
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Bu abzasdır.</p>
<a href="#">Bu keçiddir</a>
</body>
Açıqlama:
- Bu nümunədə üç dəyişən təyin edilmişdir:
--main-bg-color,--main-text-colorvə--primary-color - Bu dəyişənlər fonun, mətnin və keçidlərin rənglərini təyin etmək üçün istifadə olunur
1.3 JavaScript-də dəyişənlərin dəyərinin dəyişdirilməsi
Bu nümunədə dəyişənlər səhifənin tərtibat mövzusunu təyin etmək üçün istifadə olunur. Düyməyə basdıqda dəyişənlərin dəyərləri dəyişir, bu da fonun və mətn rənginin dəyişməsinə səbəb olur:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Mövzunu dəyiş</button>
<p>Bu bir abzasdır.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION