Sass haqida va undan foydalanish css kengaytmasi

Sass
CSS

CSS kengaytmasi

Shuningdek biz Sass yordamida bir oilaga tegishli bo’lgan propertylarni bosh property yordamida e’lon qilishimiz mumkin.
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
Sass
CSS

Sass shablon selektori

Sass da maxshus selektorlar borki u CSS selektorlariga juda o’xshash bo’lib, u % belgisi bilan e’lon qilinadi
va @extend direktivasi yordamida qo’llaniladi.
%for-grids {
min-height: 1px;
position: relative;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
.sgrid-N {
@extend %for-grids;
}
.sgrid-N {
min-height: 1px;
position: relative;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px; }
Sass
CSS
SassScript haqida
SassScript – oddiy CSS sintaksisi uchun qo’shimcha to’diruvchi bo’lib, u yordamida Sass o’zgaruvchilar,
Arifmetik amallar va ekstrafunksiyalar bilan ishlashni ta’minlaydi. SassScript yordamida CSS
o’zgaruchcilarini e’lon qilishimiz va ularni CSS ga kompilaysiya qilishimiz mumkin. Sass da o’zgaruvchilar
$ belgisi bilan e’lon qilinadi.
$width: 5em;
#main {
width: $width;
}
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
Sass
CSS
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
Sass da ma’lumot turlari
Sass da quyidagi ma’lumot turlari mavjud:

• Sonlar (1.2, 13, 10px);
• O’shtirnoqli va qo’shtirnoqsiz matinlar ("foo", 'bar', baz);
• Ranglar (blue, #04a3f9, rgba(255, 0, 0, 0.5));
• Bulli qiymatlari(true, false);
• Null;
• Qiymatlar: nuqtali, probelli (1.5em 1em 0 2em; Times New Roman, Arial, sans-serif);
• Massivlar (Maplar) (key1: value1, key2: value2);

Bundan tashqari Sass CSS dagi barcha boshqa turdagi ma’lumot turlarini qabul qiladi, Unocodlar va
hattoki !important direksiyalarini ham. Ko’p hollarda Sass da qanday ma’lumo turini yozsangiz
CSS natijada ham huddi shunday ma’lumot turini olasiz.

@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
body.firefox .header:before {
content: "Hi, Firefox users!"; }