O'zgaruvchilar

Sass O'zgaruvchilar

O'zgaruvchilar – bu ma'lumotlarni saqlash va ularni keyinchalik qayta ishlatish usuli.

Sass bilan siz quyidagi ma'lumotlarni o'zgaruvchilarda saqlashingiz mumkin:

matnlar (strings)
raqamlar (numbers)
ranglar (colors)
booleans
ro'yxatlar (lists)
nulls

Sassda o'zgaruvchi e'lon qilish uchun $ belgisi va undan keyin nom keladi:

Sass O'zgaruvchi Sintaksisi:

$ozgaruvchining_nomi: qiymat;

Quyidagi misolda, myFont, myColor, myFontSize, va myWidth deb nomlangan 4 ta o'zgaruvchi e'lon qilingan. O'zgaruvchilar e'lon qilingandan so'ng, ularni xohlagan joyda ishlatishingiz mumkin:

SCSS Sintaksisi:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
 
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
 
#container {
  width: $myWidth;
}

Shunday qilib, Sass fayli transpilyatsiya qilinganda, u o'zgaruvchilarni (myFont, myColor va boshqalar) oladi va ularning qiymatlarini CSSga joylashtirib, odatiy CSS yaratadi, masalan:

CSS Natijasi:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
 
#container {
  width: 680px;
}

Sass O'zgaruvchilar Doirasi (Scope)

Sass o'zgaruvchilari faqat ular e'lon qilingan ichma-ichlik darajasida mavjud bo'ladi.

Quyidagi misolga qarang:

SCSS Sintaksisi:

$myColor: red;
 
h1 {
  $myColor: green;
  color: $myColor;
}
 
p {
  color: $myColor;
}

<p> tegidagi matnning rangi qizilmi yoki yashil bo'ladi? Javob: qizil!

$myColor: green; e'loni <h1> qoidasi ichida joylashgan, va faqat u yerda mavjud bo'ladi!

Shunday qilib, CSS natijasi quyidagicha bo'ladi:

CSS Natijasi:

h1 {
  color: green;
}
 
p {
  color: red;
}

Bu o'zgaruvchilar doirasining standart xatti-harakati.

Sassda !global dan foydalanish

O'zgaruvchilar doirasining standart xatti-harakatini !global kalit so'zi yordamida o'zgartirish mumkin.

!global o'zgaruvchining global ekanligini bildiradi, ya'ni u har qanday darajada mavjud bo'ladi.

Quyidagi misolga qarang (oldingi misol, lekin !global bilan qo‘shilgan):

SCSS Sintaksisi:

$myColor: red;
 
h1 {
  $myColor: green !global;
  color: $myColor;
}
 
p {
  color: $myColor;
}

Endi <p> tegidagi matnning rangi yashil bo'ladi!

Shunday qilib, CSS natijasi quyidagicha bo'ladi:

CSS Natijasi:

h1 {
  color: green;
}
 
p {
  color: green;
}

Maslahat: Global o'zgaruvchilar har qanday qoidalar tashqarisida e'lon qilinishi kerak. Global o'zgaruvchilarni alohida faylga, masalan, "_globals.scss" nomli faylga joylashtirish va ushbu faylni @include kalit so'zi yordamida qo'shish maqsadga muvofiq bo'lishi mumkin.

Ushbu sahifada