8. Ro'yhatlar (lists)
1
8. Ro'yhatlar (lists)
Reja:
Ro'yhatlar
💡
List (ro'yhat) - o'z ichida bir necha qiymatlarni saqlaydi. SASS
yordamida qiymatlarni vergul (,) yoki bo'sh joy ( ) bilan ajratib yaratish
imkoniyati mavjud. Ro'yhat yaratish uchun hech qanday maxsus qavslar
talab qilinmaydi, bir necha qiymatlarni vergul (comma) yoki bo'sh joy
(space) bilan ajratishning o'zi kifoya. Biroq, qavslardan foydalanib ham
ro'yhatlar yaratish mumkin.
SCSS
$font-families: Helvetica, Arial, sans-serif;
$box-shadow: 10px 15px 0 0;
.selector {
font-family: $font-families;
}
.another-selector {
box-shadow: $box-shadow grey;
}
CSS
.selector {
font-family: Helvetica, Arial, sans-serif;
}
.another-selector {
-webkit-box-shadow: 10px 15px 0 0 grey;
box-shadow: 10px 15px 0 0 grey;
}
8. Ro'yhatlar (lists)
2
Bo'sh ro'yhat
💡
Ro'yhatlar 0ta elementdan tashkil topgan bo'lishi mumkin. () yoki []
yordamida e'lon qilingan ro'yhatlar bo'sh ko'rinishga ega bo'ladi
SCSS
$variable1: [];
$variable2: ();
Lists
Older implementations of LibSass and Ruby Sass didn't support lists with square brackets. Lists contain a
sequence of other values. In Sass, elements in lists can be separated by commas ( Helvetica, Arial, sans-
serif), spaces ( 10px 15px 0 0), or slashes as long as it's consistent within the list.
https://sass-lang.com/documentation/values/lists
Ro'yhatlar bilan ishlash
💡
Ro'yhatlar uchun SASS o'zining maxsus funksiyalariga ega. Funksiyalar
odatda ro'yhatdagi indekslardan foydalanadi. Index - ro'yhatning ichida
elementning yoki qiymatning joylashgan joyiga aytiladi
⚠
Ko'p dasturlash tillaridan farqli ravishda SASS'da ro'yhat indeksi 0dan
emas balki 1dan boshlanadi.
Ro'yhatdagi elemetni olish
💡
list.nth($list, $n) funksiyasidan foydalanib ro'yhatdagi qiymatni olish
imkoniyati mavjud. Birinchi argument ro'yhat bo'lsa, ikkinchisi esa
olmoqchi bo'lgan qiymatning indeksi hisoblanadi
8. Ro'yhatlar (lists)
3
@use "sass:list";
@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3
Ro'yhatga qo'shish
💡
list.append($list, $val) funksiyasidan foydalanib ro'yhatga qiymat qo'shish
imkoniyati mavjud. Funksiya ro'yhat va qo'shilishi kerak bo'lgan qiymatni
olib, yangi qiymatga ega bo'lgan ro'yhatni qaytaradi
@use "sass:list";
@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]
Ro'yhatdan qiymat qidirish
💡
list.index($list, $val) funksiyasidan foydalanib ro'yhat ichidan qiymat
qidirish imkoniyati mavjud. Agar qiymat ro'yhatning ichidan topilsa,
funksiya uning indeksini qaytaradi, aks holda null qiymati qaytariladi
@use "sass:list";
@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null
8. Ro'yhatlar (lists)
4
sass:list
Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations
must call functions using their global names instead. In Sass, every map counts as a list that contains a
two-element list for each key/value pair. For example, (1: 2, 3: 4) counts as (1 2, 3 4).
https://sass-lang.com/documentation/modules/list