Sass o‘zgaruvchilari
Sass o‘zgaruvchilari
O‘zgaruvchilar — keyinchalik qayta foydalanish mumkin bo‘lgan ma’lumotlarni saqlash usuli.
Sass yordamida o‘zgaruvchilarda quyidagi kabi ma’lumotlarni saqlashingiz mumkin:
- stringlar
- sonlar
- ranglar
- boolean qiymatlar
- listlar
- null qiymatlar
Sass o‘zgaruvchilarni e’lon qilish uchun $ belgisi va undan keyin keladigan nomdan foydalanadi:
Sass o‘zgaruvchisi sintaksisi:
$variablename: value;
Quyidagi misolda myFont, myColor, myFontSize va myWidth nomli 4 ta o‘zgaruvchi e’lon qilinadi. O‘zgaruvchilar e’lon qilingach, ulardan istalgan joyda foydalanishingiz 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 h.k.) oladi va o‘zgaruvchilar o‘rniga ularning qiymatlari qo‘yilgan oddiy CSS’ni chiqaradi, masalan:
CSS natijasi:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass o‘zgaruvchilarining ko‘rinish sohasi (scope)
Sass o‘zgaruvchilari faqat ular aniqlangan ichma-ichlik (nesting) darajasida mavjud bo‘ladi.
Quyidagi misolga qarang:
SCSS sintaksisi:
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
<p> tegi ichidagi matn rangi qizil bo‘ladimi yoki yashil? U qizil bo‘ladi!
Ikkinchi ta’rif — $myColor: green; — <h1> qoidasi ichida joylashgan va faqat o‘sha yerda mavjud bo‘ladi!
Demak, CSS natijasi quyidagicha bo‘ladi:
CSS natijasi:
h1 {
color: green;
}
p {
color: red;
}
Xo‘p, o‘zgaruvchilar ko‘rinish sohasi standart holatda shunday ishlaydi.
Sass !global’dan foydalanish
O‘zgaruvchilar ko‘rinish sohasining standart xatti-harakatini !global kaliti (switch) yordamida qayta belgilash mumkin.
!global o‘zgaruvchi global ekanini bildiradi, ya’ni u barcha darajalarda mavjud bo‘ladi.
Quyidagi misolga qarang (yuqoridagi bilan bir xil, lekin !global qo‘shilgan):
SCSS sintaksisi:
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
Endi <p> tegi ichidagi matn rangi yashil bo‘ladi!
Demak, CSS natijasi quyidagicha bo‘ladi:
CSS natijasi:
h1 {
color: green;
}
p {
color: green;
}
Maslahat: Global o‘zgaruvchilar har qanday qoidadan tashqarida aniqlanishi kerak. Barcha global o‘zgaruvchilarni "_globals.scss" nomli alohida faylda aniqlab, ushbu faylni @include kalit so‘zi bilan ulash oqilona bo‘lishi mumkin.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!