10.1 Dəyişənlərin elan edilməsi
CSS-də dəyişənlər, həmçinin istifadəçi xassələri (CSS Custom Properties) kimi tanınır, tərtibatçılara xassələrin dəyərlərini bir yerdə saxlamağa və onları sənəddə təkrarlanan istifadə etməyə imkan verir. Bu, CSS-i daha çevik və idarəolunan edir, xüsusən də böyük layihələrlə işləyərkən.
Dəyişənlərin elan edilməsi
CSS-də dəyişənlər iki defis (--) dəyişənin adından əvvəl istifadə etməklə elan edilir. Onlar ümumiyyətlə :root seçicisi daxilində elan edilir ki, sənəddə hər yerdə əlçatan olsunlar.
Sintaksis:
:root {
--deyişen-adı: değer;
--deyişen-adı: değer;
}
Nümunə:
Bu nümunədə üç dəyişən elan edilib: --main-color, --secondary-color, və --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Dəyişənlərin istifadəsi
Dəyişənlərin istifadəsi üçün var() funksiyası tətbiq edilir, hansı ki, dəyişənin adını arqument olaraq qəbul edir.
Sintaksis:
selektor {
xassə: var(--dəyişən-adı);
xassə: var(--dəyişən-adı);
}
Nümunə:
Bu nümunə əvvəllər elan edilmiş dəyişənlərdən istifadə edərək <body> elementinin fonunu, mətn rəngini və şrift ölçüsünü tərtib edir.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Dəyişənlərin irsiliyi və yenidən təyin edilməsi
CSS dəyişənləri elementlərin irsiliyinə əsasən ötürülür. Bu o deməkdir ki, əgər dəyişən bir elementdə elan olunubsa, onun alt elementləri də həmin dəyişəni istifadə edə bilərlər. Dəyişənlər həmçinin digər selektorlar daxilində yenidən təyin edilə bilər.
Nümunə:
Bu nümunədə .header elementi --main-color dəyişənini yenidən təyin edir və bu yeni dəyişən yalnız bu elementə tətbiq olunur. Digər tərəfdən, .footer elementi :root-da elan olunan dəyişən dəyərini istifadə edir.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 CSS-dəyişənlərdən istifadə etməyin üstünlükləri
1. Stil idarəçiliyinin sadələşdirilməsi:
Dəyişənlər bir xüsusiyyətin dəyərini bir yerdə dəyişməyə imkan verir və bu dəyişiklik avtomatik olaraq həmin dəyişənin istifadə olunduğu bütün yerlərə tətbiq edilir. Bu, temaların qurulması və uyumlu stil saxlanılması üçün xüsusilə yararlıdır.
2. Kodun oxunaqlığı və dəstəklənməsinin yaxşılaşdırılması:
CSS-də dəyişənlərin istifadəsi kodu daha oxunaqlı və anlaşıqlı edir, çünki onlar rənglər və ölçülər kimi semantik məna daşıyan dəyərlərin təsvirində istifadə edilə bilər (məsələn, --main-color əvəzinə #3498db).
3. Stilin dinamik yenilənməsi:
Dəyişənlər JavaScript vasitəsilə dinamik olaraq dəyişdirilə bilər ki, bu da daha interaktiv və dinamik istifadəçi interfeysləri yaratmağa imkan verir.
GO TO FULL VERSION