8. Ro'yhatlar (lists) Reja: Ro'yhatlar ???? List (ro'yhat)

---

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