CSS`də dəyişənlər

Jalə Mirzəyeva

13.09.2021

Biz bu məqalədə əsasən dəyişənlərin nə olduğunu,onların elan edilməsi və dəyişənləri təyin etməkdə məqsədimizi və.s digər əlaqəli mövzuları anlamağa çalışacağıq.

Elə isə gəlin başlayaq. Belə ki, əvvəllər dəyişənləri təyin etmək üçün ‘ Sass — Less ‘ kimi pre-prosessorlardan istifadə etmək lazım idi. Ancaq indi bunu sadəcə CSS-də də edə bilərik.

Dəyişənləri təyin etməkdə əsas məqsəd təkrarlanan kodların qarşısını almaqdır.Onlardan istifadə edərək daha optimallaşdırılmış kod yazmaq mümkündür. Məsələn, veb səhifədəki bir çox yerdə istifadə olunan rəng kodu,font kodu və.s. Gələcəkdə veb səhifənin şablonu dəyişdikdə, bu rəngləri ya da fontları dəyişdirmək üçün müəyyən edilmiş yerlərə bir-bir gəlmək çox problemli olacaq. Bunun əvəzinə rəng adlanan bir dəyişən yaradıb ona rəng kodu təyin etmək daha asan və əlverişlidir.

İndi dəyişənləri CSS-də necə elan edəcəyimizi öyrənək;

Dəyişən adları qarşısına 2 tire qoyaraq adlandırmağa başlayırsınız,daha sonra dəyişənin adını yazıb ona dəyərini təyin edirsiniz:

element {
--dəyişən-adı: dəyişən-dəyəri;
}

Dəyişəni təyin etdik. İndi isə təyin etdiyimiz dəyişəni çağırmaq üçün yazacağamız quruluşa diqqət edək:

property : var(--dəyişən-adı);

Var () açar sözü dəyişənə daxil olmaq üçün istifadə olunur.

Quruluşa öyrəndikdən sonra daha yaxşı anlamağınız üçün kod nümunəsi üzərində bir daha nəzər yetirək;

Dəyişənin təyin olunması:

1 ::root{
2 --white : #ffffff;
3 --red : #b00;
4 --grey : #ddd;
5 }

Dəyişənin çağırılması:

input[name="user_name"]{
  background-color:var(--red);
  color:var(--white);
  border : 1px solid var(--gray);
}

Dəyişən təyin edərkən diqqət edilməli tərəflər;

Dəyişənlərin istifadəsi zamanı yazılış qaydasına diqqət edin. Belə ki,adlandırma zamanı qabağda yazılan 2 tireden sonra rəqəm,hər hansı işarə işlətmək olmaz!

/* Yanlış adlandırma*/element{
--123deyisen : 1px ;
--#deyisen : 1rem ;
--$deyisen :1rem ;
}
/* Doğru adlandırma*/element{
--deyisen:1rem;
--deyisen-adi : #fff;
}

Son olaraqda onu qeyd edim ki , CSS`də dəyişənlər “Case Sensitive”dir. Yəni kiçik/böyük hərf duyarlılığı vardır.

                                                            . . . 

QEYD:

: root daxilində müəyyən edilmiş bir dəyişən bütün html-də, hər hansı bir #section{} daxilində təyin olunan dəyişən yalnız həmin #section daxilində keçərlidir.

/* CSS */
:root{
  --color: red;
}#section{
   --color: blue;
}p{
   --color: black;
}

Bu div'in rəngi qırmızıdır!

Bu div'in rəngi mavidir!

Bu p'nin rəngi mavidir! Çüniü parent'i #section-dur.

 

Bu p'nin rəngi qaradır!

Eyni dəyişən adından fərqli sahələrdə fərqli dəyərlərlə istifadə edə bilərsiniz. — Məsələn yuxarıdakı nümunədə —- color dəyişəninin müxtəlif dəyərlərlə bir neçə fərqli sahələrdə istifadə edilmişdir : root , #section, p .

                                                               . . .

“Px” kimi vahidlərlə istifadə olunan dəyərlər üçün quruluş bir qədər fərqlidir:.

:root{
   --space: 10;
}.box{
   padding: var(--space)px; 
}❌ Bu yazılış keçərli deyil..box{
   padding: calc(var(--space) * 1px);
}
✔️ calc() funksiyasını işlədərək keçərli hala gətirilə bilər.

CSS dəyişənləri və Javascript;

JavaScript ilə css dəyişənlərinə daxil ola, oxuya və dəyişiklik edə bilərsiniz.

const box = document.querySelector('.box'); 
const boxStyles = getComputedStyle(box); 
const boxColor = boxStyles.getPropertyValue(--box-color);
boxColor.style.setProperty('--box-color', #ccc);

Brauzerlərdə dəstəklənməsi;

 

Yuxarıdakı şəkildən hansı brauzerlərin dəstəkləyib,dəstəkləmədiyini analiz edə bilərsiniz.

 

QEYD:

Dəstəkləməyən brauzerlər üçün support() istifadə edərək istifadəyə yararlı hala gətirə bilərsiniz.

@support(--color: red){
              header{
                  background: --color;
                 }
            }

                                                                . . . 

Ən çox oxunanlar

Logo

Logolar, bəlkə də bir markanın və ya şirkətin marketinq müvəffəqiyyəti üçün bir müştəri və ya işə götürənlə ilk görüş...

Farid Askerov

Ətraflı

22.04.2021

Web sayt

Bu gün bir şirkətin web sayta sahib olmağı bir dükana, ofisə və ya telefon nömrəsinə sahib olmaq qədər əhəmiyyətlidir. Tədqiqatlar nəticəsində öyənil...

Farid Askerov

Ətraflı

22.04.2021

Rebranding

Bəzən bəzilərinizin eşitmədiyi bir sözə rast gəlirik.
”Rebranding” Rebranding nədir? Necə edilir və bunun insanlarla, şirkətlərlə, firmalarlara nə ...

Səməd Abbasov

Ətraflı

22.04.2021

Bizimlə əlaqə

Sosial media


Xəritədən bax

Bakı şəhəri Heydər Əliyev prs. 115

Ofisə bax

Caspian Sport Plaza, 3-cü bina, 12-ci mərtəbə.