Thread Starter
#0
Giriş:
Veb inkişafında CSS-i idarə etmək bəzən mürəkkəbləşə bilər, xüsusən də böyük layihələrdə. Rənglər, ölçülər və şriftlər kimi təkrar olunan dəyərləri hər dəfə yazmaq həm vaxt itkisidir, həm də sonradan dəyişiklik etməyi çətinləşdirir. Bu problemi həll etmək üçün müasir CSS-in təklif etdiyi güclü bir xüsusiyyət var: CSS Dəyişkənləri (və ya Custom Properties).
Niyə CSS Dəyişkənləri?
CSS Dəyişkənləri, adından da göründüyü kimi, CSS fayllarınızda dəyərləri saxlamağa və təkrar istifadə etməyə imkan verir. Bu, kodunuzu daha oxunaqlı, baxımlı və dinamik edir. Onlar preprosessorlara (Sass, Less) ehtiyac olmadan birbaşa brauzerdə işləyir və hətta JavaScript ilə də manipulyasiya edilə bilər.
İstifadə qaydası:
Dəyişkənlər psevdo-sinifində təyin olunur ki, bütün sənəd üzrə əlçatan olsunlar. Onları formatında yaradırıq və funksiyası ilə istifadə edirik.
Məntiqi Əsaslandırma:
Yuxarıdakı nümunədə gördüyünüz kimi, əsas rəngi və digər dəyərləri yalnız bir yerdə təyin etdik. Əgər gələcəkdə əsas rəngi dəyişmək lazım gələrsə, sadəcə içindəki dəyərini yeniləmək kifayətdir və bu, bütün layihədə avtomatik olaraq tətbiq olunacaq. Bu yanaşma, kodu təkrar yazmaqdan qaçırır, xətaları azaldır və böyük layihələrdə stil idarəetməsini xeyli sadələşdirir. Bundan əlavə, dəyişkənlər skop (scope) əsaslı işləyə bildiyi üçün, müəyyən bir komponentə aid dəyişkənləri yalnız o komponentin daxilində təyin edib istifadə etmək də mümkündür. Bu üsul, xüsusən də böyük və mürəkkəb interfeyslər inkişaf etdirərkən işinizi xeyli asanlaşdıracaq.
Veb inkişafında CSS-i idarə etmək bəzən mürəkkəbləşə bilər, xüsusən də böyük layihələrdə. Rənglər, ölçülər və şriftlər kimi təkrar olunan dəyərləri hər dəfə yazmaq həm vaxt itkisidir, həm də sonradan dəyişiklik etməyi çətinləşdirir. Bu problemi həll etmək üçün müasir CSS-in təklif etdiyi güclü bir xüsusiyyət var: CSS Dəyişkənləri (və ya Custom Properties).
Niyə CSS Dəyişkənləri?
CSS Dəyişkənləri, adından da göründüyü kimi, CSS fayllarınızda dəyərləri saxlamağa və təkrar istifadə etməyə imkan verir. Bu, kodunuzu daha oxunaqlı, baxımlı və dinamik edir. Onlar preprosessorlara (Sass, Less) ehtiyac olmadan birbaşa brauzerdə işləyir və hətta JavaScript ilə də manipulyasiya edilə bilər.
İstifadə qaydası:
Dəyişkənlər
CODE
1:rootCODE
1--dəyişkən-adı: dəyər;CODE
1var(--dəyişkən-adı);CODE
1234567891011121314151617181920212223242526272829303132
:root {
--esas-reng: #3498db; /* Mavi */
--ikinci-reng: #2ecc71; /* Yaşıl */
--font-boyutu-esas: 16px;
--kenar-boslugu: 15px;
}
body {
font-family: Arial, sans-serif;
font-size: var(--font-boyutu-esas);
margin: var(--kenar-boslugu);
}
.duyme {
background-color: var(--esas-reng);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.duyme:hover {
background-color: var(--ikinci-reng);
}
.basliq {
color: var(--esas-reng);
margin-bottom: var(--kenar-boslugu);
}
Məntiqi Əsaslandırma:
Yuxarıdakı nümunədə gördüyünüz kimi, əsas rəngi və digər dəyərləri yalnız bir yerdə təyin etdik. Əgər gələcəkdə əsas rəngi dəyişmək lazım gələrsə, sadəcə
CODE
1:rootCODE
1--esas-reng