Nədir bu CSS Variables ?
CSS Variable mövzusu css-də öyrənilməsi vacib olan mövzulardan sayılır. CSS Variable mövzusu bir yarımbaşlıq olaraq CSS Funksiyaları (CSS Functions) mövzusunun bir alt hissəsidi. CSS Funksiyaları bizim üçün əvvəlcədən hazır olaraq yazılmış olan funksiyalardı və arxasında duran məntiq DRY (Dont Repeat Yourself — Özünü Təkrar Etmə) qanuna əsaslanır. Yazılan layihədə dinamikliyin artırılmasına, təkrar təkrar istifadə oluna bilən kodların yazılmasına şərait yaradır. CSS Funksiyalarına bir neçəsini misal göstərmək olar. Məs: Counter Function, Image Function, Filter Function, Reference Function və s.
Bu gün haqqında danışmalı olduğumuz Funksiya isə 4 əsas Reference (İstinad, Referans) Funksiyasından biri olan Variable Funksiyasıdı ( var() ). Variable Funksiyasının dəyərini və necə işə yararlı bir funksiya olduğunu anlamaq üçün layihələrmizin CSS hissəsini yazarkən qarşılaşdığımız problemə aşağıdakı kod nümunəsində baxaq:
bu kodun nəticəsi aşağıdakı kimi olacaq:
yuxarıda kod nümunələrindən gördüyünüz kimi 2 button var və hərəsinə də ayrı ayrı class-lar verilib. Mən burada indi istəsəm ki birinci button arx fon rəngini dəyişib başqa bir rəng verim, padding-ləri yenidən ölçüləndirim onda gərək mən hər bir class-a statik olaraq bu dəyərləri, rəqəmləri yazmalıyam. Bu həm çox vaxt aparan həmdə yorucu bir iş olardı :(
Bunun üçün biz CSS Variable istifade edərək həmin yorucu və vaxt alan işi bir neçə saniyə içərisndə həll edəcəyik :)
İlk öncə CSS-də variable-lar yazarkən iki məqama diqqət etmək lazımdı:
- Local variable
- Global Variable
Lokal varibale adından da göründüyü kimi hər hansısa bir class-a aid ola bilən variable-lar nəzərdə tutulur. Məs:
yuxarıdakı kod nümunəsində .box class-inin icinde yaradilan variable-lar ancaq .box class-i cağrılarkən istifadə edilə bilər. Yəni lokal olaraq yaradılmış variable-dır.
Global variable isə qlobal olaraq yaradılan və hər bir elementdə istifdə oluna bilən variable-lara deyilir.
Qlobal variable yaratmaq üçün :root{} -dan istifadə olunur. Bunun üçün də aşağıdakı kod nümunəsinə baxaq:
Yuxarıdakı kod nümunəsində mən artıq istədiyim vaxt bir neçə saniyə ərzində öz kodlarımın rəngini, fontunu, arxa fon rəngini və s. dəyişə bilərəm. Bunun bizə nə qədər sürət və zaman qazandırdığını siz hələki bir neçə sətirlik kod nümunəsində az hiss edə bilərsiniz amma düşünün ki, hansısa bir şirkətdə işləyirisiniz layihədə də yüzlərlə və hətta minlərlə sətrlik kod var indi siz bunları bir-bir oturub dəyişmək istəməzsiz yəqin ki :)
və yaxud layihəni ənənəvi qayda ilə yazdız təhvil verdiz amma bir müddət sonra layihədə rebrendinq edildi və rənglər, fontlar, font ölçüləri dəyişildi :)
Bunun üçün biz əvvəlcədən öz variable-larımızı yaradaraq layihəmizdə kod yazma sürətimizi artıra və təkrar təkrar istifadə oluna bilən dinamik bir kodlaşdırma edə bilərik. Vaxt ayırıb oxuduğunuz üçün təşəkkürlər..
İstifadə etdiyim qaynaqlar:
