Sass haqida va undan foydalanish css kengaytmasi

Sass
CSS
Sass da matinli ma’lumotlarni ishlatish:
Sass da shuningdek masiv degan tushuncha mavjud bo’lib u key (kalit) va uning value (qiymat) si o’rtasidagi bog’alnishi amalga oshirib key yordamida value qidiriladi.
$status-colors: (
primary: #000,
success: #27BA6C,
info: #03a9f4,
warning: #FF8833,
danger: #ff1a1a
);
.message {
@each $status, $color in $status-colors {
&--#{$status} {
background: $color;
}
}
}
Sass
CSS
.message--primary {
background: #000;
}
.message--success {
background: #27ba6c;
}
.message--info {
background: #03a9f4;
}
.message--warning {
background: #f83;
}
.message--danger {
background: #ff1a1a;
}
Sass da operatsiyalar
Sass da barcha ma’lumot turlari tenglik operatsiyasini qo’llab quvvatlaydi ( == va != ). Bundan tashqari Sass da shunday ma’lumot turlari mavjudki, bu ma’lumot turlarining o’zigagaina tegishli bo’lgan operatsiyalari ham bor. SassScript da sonlar stida amallar bajarilayotganda ularning o’lchov birliklari hisobga olinadi (px+px, em+em, 10px * 10px == 100px * px ).
Bundan tashqari ranglar ustida ham amallar bajarish mumkin
p {
color: #010203 + #040506;
}
p {
color: #050709;
}
01 + 04 = 05, 02 + 05 = 07, и 03 + 06 = 09,
Hisoblash :
Sass funksiyalari
Sass da quyidagi funksiyalar mavjud:

• RGB funksiyalar;
• HSL funksiyalar;
• Shafoflikni (Opacity) aniqlovci funksiyalar;
• Qatorga oid funksiyalar;
• Sonlarga oid funksiyalar;
• Tanlov funksiyalari;
• Introspeksiya funksiyasi;
• If funksiyalari;
• Foydalanuvchi funksiyalari;

Sass funksiyalarida map massivlarini ham ishlatish mumkin, bu quyidagicha yoziladi:
p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
Sass Interpolyatsiya
Shuningdek SassScript o’zgaruvchilarini sintaksisini #{} interpolyatsiya bilan ham ishlatish mumkin:
$name: col-md-3;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p.col-md-3 {
border-color: blue; }
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
p {
font: 12px/30px; }