1.6-bob: SCSS/Sass — o'zgaruvchilar, nesting, mixin va funksiyalar

1-QISM — HTML, CSS va zamonaviy stillar · 6-mavzu

1. Kirish va motivatsiya

Hozirgacha sof CSS yozdik va u yaxshi ishladi. Lekin loyiha kattalashganda CSS'ning kamchiliklari ko'rinadi:

• Bir xil rangni (#3b5bdb) 50 joyda qaytarasiz; rangni o'zgartirish kerak bo'lsa — 50 joyni qidirib topasiz.
• Selektorlarni qayta-qayta yozasiz: .karta, .karta h2, .karta p, .karta:hover...
• Bir xil kod bloklarini (masalan "markazlash") har joyda takrorlaysiz.
• CSS'da o'zgaruvchi (sof CSS'da bor, lekin cheklangan), funksiya, mantiq deyarli yo'q.

Sass (Syntactically Awesome Style Sheets) — bu CSS preprocessor (oldindan qayta ishlovchi). Siz Sass yozasiz (o'zgaruvchi, nesting, mixin, funksiya bilan), u esa oddiy CSS'ga kompilyatsiya qilinadi (0.5: kompilyatsiya). Brauzer faqat oddiy CSS'ni tushunadi — Sass bu CSS'ni yozishni osonlashtiradi.

O'xshatish: sof CSS — qo'lda g'isht terish. Sass — kran va asboblar bilan qurish: bir xil g'ishtni (o'zgaruvchi) qayta ishlatasiz, tayyor bloklar (mixin) bilan tez ishlaysiz, o'lchovni avtomatik hisoblaysiz (funksiya). Natija bir xil bino (CSS), lekin qurish ancha tez va toza.

Nega o'rganamiz?

• Katta loyihada CSS'ni boshqarib bo'ladigan qiladi: o'zgaruvchi, modullar, mixin.
• Bootstrap, ko'p UI kutubxona Sass'da yozilgan — uni sozlash uchun Sass kerak.
• Responsive 1.5-bob breakpoint'larini markazlashtiramiz.
• CSS'ni "dasturlash"ga yaqinlashtiradi — o'zgaruvchi, shart, tsikl, funksiya.

2. Nazariya — chuqur tushuntirish

2.1. Preprocessor qanday ishlaydi

   style.scss  ──(Sass kompilyatori)──▶  style.css  ──▶  brauzer
   (siz yozasiz)                          (avtomatik)     (faqat CSS'ni biladi)

Siz .scss fayl yozasiz; asbob (Sass) uni .css ga aylantiradi. Brauzer Sass'ni bilmaydi — u faqat natijaviy CSS'ni o'qiydi. (Ishga tushirish: npm install -D sass (0.7) sass style.scss style.css.)

2.2. SCSS va Sass sintaksisi farqi

Ikki yozuv usuli bor:

• SCSS (.scss) — CSS'ning kengaytmasi; jingalak qavslar {} va ; ishlatadi. Har qanday to'g'ri CSS — to'g'ri SCSS (sass-lang). Eng keng tarqalgan.
• Sass (.sass) — eski, qisqartirilgan; qavs va ; yo'q, faqat otstup (indent).

Biz SCSSni ishlatamiz (CSS'ga yaqin, oson o'tiladi).

2.3. Variables (o'zgaruvchilar) — $

O'zgaruvchi — qiymatni bir joyda saqlab, hamma joyda ishlatish (sass-lang). $ bilan:

$asosiy-rang: #3b5bdb;
$matn-rang: #1a1a1a;
$bo'sh-joy: 1rem;
$shrift: 'Segoe UI', sans-serif;

.tugma {
  background: $asosiy-rang;   // o'zgaruvchini ishlatamiz
  padding: $bo'sh-joy;
  font-family: $shrift;
}

Endi rangni o'zgartirish kerak bo'lsa — bir joyda ($asosiy-rang) o'zgartirasiz, hamma joyda yangilanadi. (Eslatma: zamonaviy CSS custom property --var ham bor — 1.2; Sass o'zgaruvchisi kompilyatsiya paytida ishlaydi, CSS o'zgaruvchisi brauzerda ishlash paytida. Ikkovi birga ishlatiladi.)

2.4. Nesting (ichma-ich) — ierarxiyani aks ettirish

Nesting selektorlarni HTML tuzilishiga mos ravishda ichma-ich yozishga imkon beradi (sass-lang); kompilyator uni oddiy CSS'ga "yoyadi":

// SCSS (yozish oson)
.karta {
  padding: 1rem;

  h2 { color: $asosiy-rang; }       // .karta h2
  p { color: gray; }                // .karta p

  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); } // .karta:hover (& = ota)
  &--katta { padding: 2rem; }       // .karta--katta (BEM — 1.9)
}

/* Kompilyatsiyadan keyin (CSS) */
.karta { padding: 1rem; }
.karta h2 { color: #3b5bdb; }
.karta p { color: gray; }
.karta:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.karta--katta { padding: 2rem; }

& — joriy (ota) selektorni bildiradi; :hover, --modifier 1.9-bob uchun zarur.

Nesting'ni 3 darajadan ko'p qilmang — chuqur nesting yuqori specificity 1.2-bob va o'qishsiz CSS keltiradi. Bu — eng ko'p uchraydigan Sass xatosi.

2.5. Mixins — qayta ishlatiladigan kod bloklari

Mixin — bir nechta e'lonni nom bilan saqlab, qayta ishlatish (sass-lang). @mixin bilan e'lon, @include bilan ishlatish:

@mixin markaz {                      // mixin e'loni
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin tugma($rang, $matn: white) {  // parametrli mixin ($matn — standart)
  background: $rang;
  color: $matn;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.hero { @include markaz; min-height: 100vh; }   // mixin'ni ishlatamiz
.btn-asosiy { @include tugma($asosiy-rang); }
.btn-ogoh { @include tugma(orange, black); }

Mixin — "markazlash" 1.3-bob yoki responsive breakpoint kabi takrorlanuvchi kodni bir joyda saqlashning eng yaxshi usuli.

2.6. @extend — uslublarni "meros qilish"

@extend — bir selektorning uslublarini boshqasiga berish (sass-lang):

%tugma-asos {                        // % — "placeholder" (faqat extend uchun)
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}
.btn-saqlash { @extend %tugma-asos; background: green; }
.btn-bekor { @extend %tugma-asos; background: gray; }

Mixin vs @extend: ko'p hollarda mixin xavfsizroq va tushunarliroq (ayniqsa parametr kerak bo'lsa). @extend chiqarilgan CSS'ni kichiklashtiradi, lekin selektorlarni kutilmagancha guruhlashi mumkin. Yangi boshlovchiga: asosan mixin ishlating.

2.7. Partials va @use — modullarga bo'lish

Katta CSS'ni bo'laklarga (modul) bo'lib, oson boshqarish (sass-lang). Partial — nomi _ (pastki chiziq) bilan boshlangan fayl (_variables.scss); u alohida CSS'ga kompilyatsiya qilinmaydi, faqat boshqa faylga ulanadi:

  styles/
   ├── _variables.scss     o'zgaruvchilar
   ├── _mixins.scss        mixinlar
   ├── _navbar.scss        navbar uslublari
   └── main.scss           hammasini birlashtiradi

// main.scss
@use 'variables' as v;     // _variables.scss ni ulaydi (zamonaviy usul)
@use 'mixins' as m;

.tugma {
  background: v.$asosiy-rang;   // modul nomi orqali
  @include m.markaz;
}

@use vs @import: eski @import hammasini global qilardi (chalkashlik). Zamonaviy @use modullarni namespace bilan ulaydi (toza, tavsiya etiladi). @import Sass'da eskirgan.

2.8. Funksiyalar, operatorlar va boshqaruv

Sass'da haqiqiy mantiq bor (0.6: shart, tsikl):

// Matematik operatorlar
.yarim { width: 100% / 3; }          // hisoblash
$katta: $bo'sh-joy * 2;              // o'zgaruvchi bilan

// O'rnatilgan funksiyalar (rang bilan ishlash)
.tugma:hover { background: darken($asosiy-rang, 10%); } // to'qroq
.fon { background: lighten($asosiy-rang, 40%); }        // ochroq
.shaffof { background: rgba($asosiy-rang, 0.5); }       // shaffoflik

// O'z funksiyang
@function px-to-rem($px) {
  @return $px / 16 * 1rem;            // px'ni rem'ga (1.2: 16px = 1rem)
}
h1 { font-size: px-to-rem(32); }      // = 2rem

// Boshqaruv (@if, @each, @for)
@each $nom, $rang in (xato: red, ok: green, ogoh: orange) {
  .matn-#{$nom} { color: $rang; }     // #{} — interpolatsiya (qiymatni nomga qo'shish)
}
// natija: .matn-xato {color:red} .matn-ok {color:green} .matn-ogoh {color:orange}

2.9. Built-in modullar va math.div (zamonaviy bo'lish)

Yuqorida 100% / 3 va $px / 16 ko'rdik. Diqqat: zamonaviy Sass (Dart Sass)da / belgisi bo'lish uchun eskirgan (deprecated) — chunki CSS'da / ko'pincha ajratgich (masalan font: 16px/1.5). Bo'lish uchun endi math.div ishlatiladi. Buning uchun built-in modul ulanadi:

@use 'sass:math';                    // built-in modulni ulaymiz

.yarim { width: math.div(100%, 3); } //  to'g'ri bo'lish (eski: 100% / 3)

@function px-to-rem($px) {
  @return math.div($px, 16) * 1rem;  //  math.div bilan
}

Sass standart modullari (har biri @use 'sass:...' bilan ulanadi):

• sass:math — math.div, math.round, math.ceil, math.max, math.$pi.
• sass:color — color.adjust, color.scale (zamonaviy darken/lighten o'rniga).
• sass:string — string.length, string.to-upper-case, string.slice.
• sass:map — map.get, map.has-key, map.keys (xaritalar bilan, pastda).

Eski vs zamonaviy: darken($r, 10%) hali ishlaydi, lekin zamonaviy Sass color.adjust($r, $lightness: -10%) ni tavsiya etadi. Kitobda qisqalik uchun darken ishlatamiz; yangi loyihada @use 'sass:color' + color.adjust afzal.

2.10. Maps (xaritalar) va map.get

Map — kalit-qiymat juftlari to'plami (JS object yoki lug'atga o'xshaydi). Dizayn tizimida (ranglar, masofalar) bir manbada saqlash uchun ideal:

@use 'sass:map';

$ranglar: (
  "asosiy": #3b5bdb,
  "xato":   #e03131,
  "ok":     #2f9e44,
);

.tugma { background: map.get($ranglar, "asosiy"); }  // bitta qiymatni olish: #3b5bdb

@each $nom, $qiymat in $ranglar {                    // butun xarita ustida tsikl
  .fon-#{$nom} { background: $qiymat; }
}

map.get($xarita, $kalit) — kalitga mos qiymatni qaytaradi (kalit yo'q bo'lsa — null). map.has-key($xarita, $kalit) borligini tekshiradi.

2.11. @function vs @mixin — farqi nimada

Ikkovi ham qayta ishlatish uchun, lekin maqsadi boshqacha:

• @mixin — bir nechta CSS e'lonini (qator-qator stil) qaytaradi; @include bilan chaqiriladi.
• @function — bitta qiymatni hisoblab qaytaradi (@return bilan); qiymat kerak joyda ishlatiladi.

@function ikki-baravar($n) { @return $n * 2; }   // qiymat qaytaradi
@mixin quti($p) { padding: $p; margin: $p; }     // e'lon(lar) qaytaradi

.box {
  width: ikki-baravar(50px);   // funksiya — qiymat (= 100px)
  @include quti(1rem);         // mixin — e'lonlar
}

Qoida: qiymat kerak bo'lsa — @function; bir nechta stil kerak bo'lsa — @mixin.

2.12. @if/@else va @for — shart va tsikl

@each'dan tashqari Sass'da shart (@if/@else) va sanoqli tsikl (@for) bor:

@use 'sass:math';

@mixin matn-kontrast($fon) {
  // oddiy yorqinlik shartiga ko'ra matn rangini tanlaymiz
  @if math.div(red($fon) + green($fon) + blue($fon), 3) > 150 {
    color: black;            // ochiq fonda — qora matn
  } @else {
    color: white;            // to'q fonda — oq matn
  }
}

// @for — 1 dan 3 gacha aralash masofa class'lari
@for $i from 1 through 3 {
  .bo'sh-#{$i} { padding: #{$i * 0.5}rem; }  // .bo'sh-1, .bo'sh-2, .bo'sh-3
}

@for ... from A through B — A'dan B'gacha (B qo'shilgan); through o'rniga to — oxirgisini qo'shmaydi. (@while $shart { ... } ham bor — shart rost ekan takrorlaydi, lekin kamroq kerak bo'ladi.)

3. Sintaksis — tez ma'lumotnoma

$ozgaruvchi: qiymat;              // o'zgaruvchi (2.3)

.ota {
  & nested { }                   // nesting + & (2.4)
}

@mixin nom($param) { ... }        // mixin e'lon (2.5)
@include nom(qiymat);             // mixin ishlatish

%placeholder { ... }              // @extend uchun (2.6)
@extend %placeholder;

@use 'partial' as p;              // modul ulash (2.7)
@use 'sass:math';                 // built-in modul (2.9)

@function nom($x) { @return ...; }// funksiya — qiymat qaytaradi (2.8, 2.11)
math.div($a, $b)                  // bo'lish (/ o'rniga — 2.9)
$xarita: (kalit: qiymat);         // map; map.get($xarita, kalit) (2.10)
@if $shart { } @else { }          // shart (2.12)
@each / @for / @while             // tsikl (2.8, 2.12)
#{$ozgaruvchi}                    // interpolatsiya (2.8)

4. Batafsil kod namunalari

Misol 1 — O'zgaruvchilar va nesting

$asosiy: #3b5bdb;
$radius: 8px;

.karta {
  padding: 1.5rem;
  border-radius: $radius;
  border: 1px solid #e0e0e0;

  &__sarlavha {              // .karta__sarlavha (BEM — 1.9)
    color: $asosiy;
    margin-bottom: 0.5rem;
  }
  &:hover {                  // .karta:hover
    box-shadow: 0 4px 16px rgba($asosiy, 0.15);  // rang funksiyasi (2.8)
  }
}

Misol 2 — Responsive breakpoint mixini (1.5 bilan birlashadi)

// Breakpoint'larni markazlashtiramiz (1.5'dagi takrorlanishni tugatamiz)
$bp-planshet: 768px;
$bp-desktop: 1024px;

@mixin planshet { @media (min-width: $bp-planshet) { @content; } }
@mixin desktop  { @media (min-width: $bp-desktop)  { @content; } }
// @content — @include ichidagi kodni shu yerga "joylaydi"

.kartalar {
  display: grid;
  grid-template-columns: 1fr;              // mobil (1.5)

  @include planshet { grid-template-columns: 1fr 1fr; }   // ≥768px
  @include desktop  { grid-template-columns: repeat(3, 1fr); } // ≥1024px
}

Misol 3 — Mixin bilan tugma tizimi

@mixin tugma($fon, $matn: white) {
  background: $fon;
  color: $matn;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;             // 0.5: silliq

  &:hover { background: darken($fon, 8%); } // avtomatik to'qroq (2.8)
}

.btn-asosiy { @include tugma(#3b5bdb); }
.btn-xavf   { @include tugma(#e03131); }
.btn-ok     { @include tugma(#2f9e44); }

Misol 4 — @each bilan utility class'lar yaratish

$ranglar: (
  asosiy: #3b5bdb,
  xato: #e03131,
  ok: #2f9e44,
);

@each $nom, $qiymat in $ranglar {
  .matn-#{$nom} { color: $qiymat; }        // #{} interpolatsiya (2.8)
  .fon-#{$nom} { background: $qiymat; }
}
// natija: .matn-asosiy, .fon-asosiy, .matn-xato, .fon-xato, ...

5. To'g'ri va noto'g'ri holatlar

1) Chuqur nesting

/*  4+ daraja — yuqori specificity, o'qishsiz 2.4-bob */
.a { .b { .c { .d { color: red; } } } }

/*  2-3 darajadan oshma; BEM bilan tekis yoz 1.9-bob */
.karta__matn { color: red; }

2) Sass o'zgaruvchisi vs CSS o'zgaruvchisi

/*  runtime'da o'zgarishi kerak (masalan dark mode) bo'lsa, Sass var yetmaydi */
$fon: white;  // kompilyatsiya paytida "qotadi"

/*  runtime o'zgarish kerak bo'lsa — CSS custom property (1.2, 1.5) */
:root { --fon: white; }

3) @import ishlatish (eskirgan)

/*  eski, global chalkashlik */
@import 'variables';

/*  zamonaviy, namespace bilan 2.7-bob */
@use 'variables' as v;

4) Mixin o'rniga kodni takrorlash

/*  "markazlash"ni har joyda qayta yozish */
/*  bir marta @mixin markaz, keyin @include 2.5-bob */

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — .scss o'zgarsa ham brauzerda ko'rinmaydi

Sababi: Sass kompilyatsiya qilinmadi (.css yangilanmadi). Yechimi: sass --watch style.scss style.css (o'zgarishni avtomatik kuzatadi) yoki npm script 0.7-bob; brauzer .cssni ulaganini tekshiring, .scssni emas.

Xato 2 — Undefined variable

Error: Undefined variable: "$asosiy".

Sababi: o'zgaruvchi e'lon qilinmagan yoki partial ulanmagan 2.7-bob. Yechimi: @use/@import bilan _variables.scssni ulang; o'zgaruvchi ishlatishdan oldin e'lon qilingan bo'lsin.

Xato 3 — Chiqarilgan CSS juda katta/takroriy

Sababi: chuqur nesting yoki @extend ni noto'g'ri ishlatish. Yechimi: nesting'ni 3 darajagacha cheklang; @extend o'rniga mixin 2.6-bob.

Xato 4 — @use bilan o'zgaruvchi topilmayapti

Sababi: @use 'mod' namespace yaratadi — mod.$var deb chaqirish kerak 2.7-bob. Yechimi: @use 'variables' as v; ... v.$asosiy yoki @use 'variables' as * (namespace'siz, ehtiyot bilan).

Xato 5 — / bo'lish uchun ogohlantirish chiqaradi

DEPRECATION WARNING: Using / for division is deprecated...

Sababi: zamonaviy Sass'da / bo'lish uchun eskirgan 2.9-bob. Yechimi: @use 'sass:math' ulab, 100% / 3 o'rniga math.div(100%, 3) yozing.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• CSS asoslari 1.2-bob: Sass — CSS ustiga qurilgan; o'zgaruvchi/funksiya CSS qiymatlari bilan ishlaydi.
• Responsive 1.5-bob: breakpoint'larni mixin bilan markazlashtirish (Misol 2).
• BEM 1.9-bob: &__element, &--modifier — nesting bilan BEM (Misol 1).
• Tailwind 1.7-bob: muqobil yondashuv (utility-first) — Sass'ga raqobat.
• React (11): CSS Modules / styled-components ko'pincha Sass o'rniga; lekin ko'p loyiha hali Sass.
• Bootstrap, UI kutubxona: Sass'da sozlanadi.
• npm/build (0.7, 5.2): sass paketi, build script.

8. Eng yaxshi amaliyotlar (best practices)

• O'zgaruvchilardan keng foydalaning (rang, masofa, shrift, breakpoint) — bir manba 2.3-bob.
• Partial + @use bilan modullashtiring (_variables, _mixins, _komponent) 2.7-bob.
• Nesting'ni 3 darajadan oshirmang — specificity past tutish 2.4-bob.
• Takrorlanuvchi kod — mixin (markazlash, breakpoint, tugma) 2.5-bob.
• Runtime o'zgarish (dark mode) kerak bo'lsa — CSS custom property, Sass o'zgaruvchisi emas (5-bo'lim).
• @use ishlating, @import emas (zamonaviy — 2.7).
• darken/lighten/rgba bilan rang ohanglarini avtomatik yasang 2.8-bob.
• Bo'lishda / emas, math.div ishlating (@use 'sass:math') — zamonaviy Sass talabi 2.9-bob.
• Ko'p ranglar/masofalar — map + map.get bilan bitta manbada saqlang 2.10-bob.
• sass --watch yoki npm script bilan ishlang (har safar qo'lda kompilyatsiya qilmang).

9. Amaliy loyiha: "CSS'ni SCSS'ga Refaktor + Dizayn Tizimi"

1.2–1.5 da yozgan CSS'ingizni SCSS'ga aylantirib, professional "dizayn tizimi" qurasiz.

Maqsad

O'zgaruvchi, nesting, mixin, partial va funksiyalarni amalda qo'llab, takrorlanishni tugatish va boshqarib bo'ladigan stil tizimini yasash.

Talablar (requirements)

1. O'rnatish: npm install -D sass 0.7-bob; package.jsonga "scss": "sass --watch src/styles/main.scss src/styles/main.css" scripti.
2. Partial tuzilma 2.7-bob: _variables.scss (ranglar, masofa, shrift, breakpoint), _mixins.scss, _base.scss, va komponent partial'lar (_navbar.scss, _karta.scss). main.scss @use bilan birlashtiradi.
3. O'zgaruvchilar: kamida 5 ta (asosiy/matn/fon rang, bo'sh-joy, radius) 2.3-bob.
4. Breakpoint mixinlari: @mixin planshet/@mixin desktop @content bilan (Misol 2) — 1.5'dagi media query'larni shular bilan almashtiring.
5. Tugma mixini: parametrli @mixin tugma($fon) — kamida 3 xil tugma yarating (Misol 3).
6. Nesting + &: kamida bitta komponentda BEM uslubida (&__, &--, &:hover) (Misol 1).
7. @each: rang xaritasidan utility class'lar yarating (Misol 4).
8. (Bonus) @function px-to-rem yoki rang funksiyalari (darken) ishlating.

Maslahatlar (hint)

• sass --watch ni ishga tushiring — .scss saqlaganda .css avtomatik yangilanadi.
• HTML'da faqat natijaviy main.cssni ulang (.scssni emas — 2.1).
• @content mixinga "ichki kod" qabul qildiradi — breakpoint mixinlari uchun zarur.
• #{$nom} interpolatsiya — class nomiga o'zgaruvchi qo'shish uchun (Misol 4).
• Nesting'ni 3 darajadan oshirmang.

"Tayyor" mezonlari (acceptance criteria)

• sass o'rnatilgan, watch script ishlaydi.
• Kamida 4 partial fayl @use bilan birlashtirilgan.
• Barcha ranglar/masofalar o'zgaruvchi orqali (qattiq kodlangan qiymat yo'q).
• Breakpoint'lar mixin orqali (takrorlangan @media yo'q).
• Tugma tizimi parametrli mixin bilan.
• Kamida bitta komponent nesting + & bilan.
• @each bilan kamida bitta utility guruh yaratilgan.
• Natijaviy .css brauzerda to'g'ri ishlaydi.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda CSS'ni kuchaytiruvchi SCSS/Sassni o'rgandik:

• Sass — preprocessor: siz yozasiz, u oddiy CSS'ga kompilyatsiya qiladi. SCSS sintaksisi — CSS'ning superseti.
• O'zgaruvchi ($) — qiymatni bir manbada saqlash; nesting (& bilan) — ierarxiyani aks ettirish (lekin chuqur qilmang).
• Mixin (@mixin/@include, @content) — qayta ishlatiladigan bloklar; @extend — uslub merosi (asosan mixin afzal).
• Partial (_fayl) + @use — modullarga bo'lish (toza, zamonaviy).
• Funksiya (@function — qiymat) vs mixin (e'lonlar); @each/@for/@if — CSS'ga mantiq.
• Built-in modullar (@use 'sass:math'/'sass:map'/'sass:color') — math.div (bo'lish), map.get (xarita), rang funksiyalari.

Keyingi bob — 1.7-bob: Tailwind CSS (utility-first). SCSS — CSS'ni yozishning bir yo'li (o'z fayl, o'z class'lar). Tailwind — butunlay boshqacha falsafa: tayyor "utility" class'larni to'g'ridan-to'g'ri HTML'da ishlatib, CSS fayl deyarli yozmaysiz. Ikkov yondashuvni solishtirib, zamonaviy stil yozishning ikki yo'lini egallaymiz.

Foydalanilgan rasmiy/ishonchli manbalar

• sass-lang.com — Sass Basics, variables, nesting, @mixin/@include, partials, @extend, @use
• sass-lang.com/documentation — funksiyalar, boshqaruv (@each, @if, @for), interpolatsiya
• sass-lang.com/documentation/modules — built-in modullar (sass:math, sass:map, sass:color), math.div
• MDN Web Docs — CSS custom properties (Sass o'zgaruvchisi bilan farqi)