Sass haqida va undan foydalanish css kengaytmasi

Sass
CSS
Sass da direktivlar
Sass da o’ziga hos bo’lgan direktivalar mavjud bo’lib ular programmistlarga tanish bo’lgan JavaScrip, Java va hokazo dasturlash tillarida uchraydigan if, for, while kabi funksiyalarga o’xshashdir. Sass da quyidagi direktivalar mavjud:
@if – foydalanuvchi tomonidan berilgan shart bajrilishiga qarab stillarni tanlaaydi;
@for – foydalanuvchi bergan qiymatlarga qarab stillarni o’zgarishini sikilga solidi;
@each – bir nechta o’zgaruvchilarni bir qatorda e’lon qilib, ularni stillarga yozadi;
@wihile – foydalanuvchi tomonidan berilgan qiymat shartni qanoatlantirmaguniqa qada sikil hosil qilib stillarni CSS ga kompilyatsiya qiladi;
@if direktivasi:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
@for direktivasi:
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
@each direktivasi:
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
@while direktivasi:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
Sass @mixin
Sass da @mixin ham direktivaning bir turi bo’lib, har doim o’z nomiga ega bo’lishi kerak. @mixin ishlashi uchun @include direktivasi yordamida chaqirilishi lozim.
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }