Sass haqida va undan foydalanish css kengaytmasi

6.1 Sass haqida va undan foydalanish
6.2 CSS kengaytmasi
6.3 Sass shablon selektori
6.4 SassScript haqida
6.5 Sassda o’zgaruvchilar
6.6 Ma’lumot turlari
6.7 Operatsiyalar
6.8 Sass funksiyalari
6.9 Sass Interpolyatsiya
6.10 Sass da direktivlar
6.11 Sass @mixin
Sass haqida va undan foydalanish
Sass – rivojlantirilgan va ayni payitda bir maromda rivojlanayotgan, front-end developerlar orasida keng ommalashayotgan CSS turidir.

• CSS bilan to’liq muvofiqligi
• Boy funksiyalar
• Tajriba
• Qo’llab quvatlash
• Ko’pchilikning tanlovi
• Fremvorklari

Sass haqida va undan foydalanish
Sass ni 3 hil yo’l bilan ishlatish mumkin:

• Komandalar qatorida instruksiya sifatida
• Ruby ning alohida moduli sifatida
• Rack qo’llab – quvvatlovchi barcha modullarga alohida modul sifatida, Ruby On Rails va Merb fremvorklari yordamida

Biz 2 usuldan ya’ni Rubydan foydalanamiz. Ruby dasturini o’rnatamiz va komandalar qatorida quyidag buyuruqlarni yozamiz:

• gem install sass – Sass modulini o’rnatish uchun;
• sass input.scss output.css – Sass ni komandalar qatorida ishga tushurish;
• sass --watch input.scss:output.css - .scss fayil ortidan doimiy nazoratni o’rnatish;

CSS kengaytmasi

Sass – CSS ni to’liq qo’llab – quvatlab, selektorlarini bir birining ichiga joylashtirish imkonini beradi.
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
Sass
CSS

CSS kengaytmasi

Sass da ishlayotganingizda shunday vaqtlar ham bo’ladiki bir pog’ona tepadagi selektorga stil berish kerak bo’lib qoladi. Bunday holatlar uchun Sass da maxsus element & belgisi bor. Bu belgi orqali biz bir pog’onadagi element uchun bemalol stil berishimiz mumkin.
a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
body .firefox & {
font-weight: normal;
}
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}