Sass/SCSS 1: o'zgaruvchilar, nesting va modullar

Qisqacha: Sass — CSS'ga kompilyatsiya qilinadigan kengaytma: siz .scss faylda $o'zgaruvchi, ichma-ich qoidalar (nesting) va modullar bilan yozasiz, sass dasturi esa undan brauzer tushunadigan oddiy .css fayl yasaydi. Bugun yagona tirik versiyasi — Dart Sass (npm install --save-dev sass). Fayllar _nom.scss partial'larga bo'linadi va @use bilan ulanadi; eski @import eskirgan.

Bu darsda

• Sass nima ekanini, SCSS va .sass sintaksislari farqini va nega brauzer .scss ni ko'rmasligini tushuntira olasiz.
• Dart Sass'ni loyihaga o'rnatib, faylni kompilyatsiya qilasiz va --watch bilan kuzatasiz.
• $o'zgaruvchi va CSS o'zgaruvchisidan qachon qaysi birini tanlashni bilasiz.
• Nesting va & bilan yozasiz, uning brauzerdagi native nesting'dan farqini ayta olasiz.
• «Bahor» stillarini partial fayllarga bo'lib, @use va @forward bilan ulaysiz.

Oldin bilishingiz kerak: Native CSS nesting, CSS o'zgaruvchilari 1, CSS metodologiyalari, npm'ga birinchi qadam.

1. Nega bu kerak?

CSS metodologiyalari darsida «Bahor»ning CSS'ini yettita faylga bo'ldik. Dasturchi uchun bu qulay: karta — bir faylda, palitra — boshqasida. Lekin o'sha darsda narxini ham o'lchadik: @import bilan ulangan fayllarni brauzer navbat bilan yuklaydi. Dasturchiga ko'p fayl kerak, brauzerga esa bitta.

Oshxonani eslang. Rustam aka oshni tayyorlashda o'nlab idish ishlatadi: sabzi alohida, go'sht alohida, ziravorlar alohida. Mehmon esa faqat bitta likopchani ko'radi. Idishlar — oshpaz uchun, likopcha — mehmon uchun.

Sass aynan shunday ishlaydi. Siz ko'p faylda, qulay imkoniyatlar bilan yozasiz. Sass ularni bitta toza .css faylga yig'ib beradi. Brauzer faqat natijani ko'radi.

Yana bir sabab — ish bozori. Sass 2006-yildan beri bor, va o'n yillar davomida yozilgan minglab loyihalar hali ham Sass'da. Masalan, Bootstrap 5 ning manba kodi SCSS'da (CSS freymvorklar darsida ko'rasiz). Ishga kirsangiz, .scss faylni ochishingiz deyarli aniq.

2. Sass nima?

2.1 Preprotsessor

Preprotsessor (preprocessor) — kodni asosiy dasturdan oldin qayta ishlab beradigan vosita. "Pre" — "oldin". Sass sizning .scss faylingizni brauzerdan oldin o'qiydi va oddiy CSS'ga aylantiradi. Bu jarayon kompilyatsiya (compilation) deb ataladi.

flowchart LR
  A["_ranglar.scss"] --> S["sass dasturi"]
  B["_karta.scss"] --> S
  C["asosiy.scss"] --> S
  S --> D["asosiy.css"]
  D --> E["Brauzer"]

Nimaga qarang: chapdagi uchta fayl faqat sizning kompyuteringizda yashaydi. Brauzerga bitta asosiy.css boradi. HTML'dagi link ham aynan shu .css faylni ulaydi — .scss ni emas.

2.2 Dart Sass — yagona tirik versiya

Sass'ning bir necha versiyasi bo'lgan. Birinchisi Ruby tilida yozilgan edi. Keyin C++ dagi LibSass va uning Node uchun o'rami node-sass paydo bo'ldi — ular tez edi va ko'p yillar mashhur bo'ldi. Bugun ikkalasi ham to'xtatilgan. npm'dan so'rab ko'rdik (npm view node-sass deprecated):

Node Sass is no longer supported. Please use `sass` or `sass-embedded` instead.

Tarjimasi: "Node Sass endi qo'llab-quvvatlanmaydi. Uning o'rniga sass yoki sass-embedded dan foydalaning."

Hozir faqat Dart Sass rivojlanadi. Yangi imkoniyatlar — @use, @forward, sass:math — faqat unda. npm'da u ikki nomda bor:

• sass — hamma kompyuterda ishlaydigan oddiy variant. Biz shuni ishlatamiz.
• sass-embedded — o'sha Sass, lekin katta loyihalarda tezroq ishlaydigan variant. Vite uni tavsiya qiladi (pastda ko'ramiz).

Eski maqola yoki loyihada node-sass ni ko'rsangiz — bu eskirgan loyiha belgisi.

2.3 Ikki sintaksis: .scss va .sass

Sass'da yozishning ikki usuli bor. SCSS ("Sassy CSS") — CSS'ga o'xshaydi: jingalak qavs va ; bor. Fayl kengaytmasi .scss. Bugun deyarli hamma shuni ishlatadi.

Ikkinchisi — chekinishli sintaksis (indented syntax), kengaytmasi .sass. Unda qavs va ; yo'q, bloklar Python'dagidek bo'sh joy bilan ajratiladi:

$rang-asosiy: #2f6b3a
$rang-urgu: #b4461a

h1
  color: $rang-asosiy

  &:hover
    color: $rang-urgu

Xuddi shu kod SCSS'da:

$rang-asosiy: #2f6b3a;
$rang-urgu: #b4461a;

h1 {
  color: $rang-asosiy;

  &:hover {
    color: $rang-urgu;
  }
}

Ikkalasi ham bitta natija beradi — tekshirdik:

h1 {
  color: #2f6b3a;
}
h1:hover {
  color: #b4461a;
}

SCSS'ning katta afzalligi: har qanday to'g'ri CSS — to'g'ri SCSS. Mavjud .css faylni .scss deb qayta nomlasangiz, u darhol ishlaydi. Shuning uchun kursda faqat SCSS ishlatamiz. "Sass" so'zi esa ikkalasining umumiy nomi bo'lib qoldi.

Tekshirib ko'ring: Hamkasbingiz asosiy.scss faylni HTML'ga <link rel="stylesheet" href="scss/asosiy.scss"> deb uladi. Nima bo'ladi?

3. O'rnatish va birinchi kompilyatsiya

3.1 Sass'ni loyihaga o'rnatish

Sass — npm paketi. npm'ga birinchi qadam darsida ko'rgan buyruqlar yetarli. npm'ning chuqur imkoniyatlarini 16-qismda o'rganamiz — hozir buyruqlarni aynan takrorlang.

«Bahor» papkasida package.json bo'lmasa, avval uni yarating. Keyin Sass'ni dasturchi vositasi sifatida o'rnating:

npm init -y
npm install --save-dev sass
npx sass --version

Terminalda (Sass 1.105.1 bilan tekshirdik; paketlar soni sizda farq qilishi mumkin):

added 12 packages, and audited 13 packages in 2s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
1.105.1 compiled with dart2js 3.13.5

Oxirgi qator — npx sass --version javobi: o'rnatilgan Sass versiyasi. --save-dev sababi oddiy: Sass faqat siz kod yozayotganda kerak, saytning o'ziga emas (npm darsidagi oshpaz pichog'i).

3.2 Papkalar

Manba fayllar va natija alohida turadi:

bahor/
├── package.json
├── scss/            ← siz yozasiz
│   └── asosiy.scss
└── assets/css/      ← Sass yozadi
    └── asosiy.css

scss/ — faqat dasturchi uchun. assets/css/asosiy.css — brauzerga boradigan fayl. HTML'dagi link o'zgarmaydi.

3.3 Birinchi fayl

scss/asosiy.scss:

// «Bahor» ranglari — Sass o'zgaruvchilari
$rang-asosiy: #2f6b3a;
$rang-urgu: #b4461a;
$rang-fon: #fffaf0;

body {
  background-color: $rang-fon;
}

h1 {
  color: $rang-asosiy;
}

.narx {
  color: $rang-urgu;
  font-weight: bold;
}

Kompilyatsiya — birinchisi manba, ikkinchisi natija fayl:

npx sass scss/asosiy.scss assets/css/asosiy.css

Terminal jim qoladi — xato yo'q. assets/css/asosiy.css ichida:

body {
  background-color: #fffaf0;
}

h1 {
  color: #2f6b3a;
}

.narx {
  color: #b4461a;
  font-weight: bold;
}

/*# sourceMappingURL=asosiy.css.map */

Uchta narsaga qarang:

• $rang-asosiy hech qayerda qolmadi — hamma joyda tayyor qiymat #2f6b3a turibdi.
• // izoh yo'qoldi. SCSS'da // — "jim izoh", u natijaga tushmaydi. /* */ izoh esa CSS'ga ko'chadi. CSS nima darsida // oddiy CSS'ni buzishini ko'rgan edik — SCSS'da esa u to'g'ri. Faqat .scss faylda!
• Oxiridagi sourceMappingURL va yonida paydo bo'lgan asosiy.css.map — source map: "CSS'ning qaysi qatori SCSS'ning qaysi qatoridan chiqdi" degan xarita. DevTools uni o'qib, Styles panelida .css o'rniga asosiy.scss va asl qator raqamini ko'rsatadi. Batafsil — Source map'lar darsida.

Kerak bo'lmasa, source map o'chiriladi: npx sass --no-source-map scss/asosiy.scss assets/css/asosiy.css.

3.4 --watch: saqlasangiz — kompilyatsiya

Har o'zgarishdan keyin buyruqni qayta yozish noqulay. --watch Sass'ni "kuzatuvchi" rejimga qo'yadi:

npx sass --watch scss/asosiy.scss assets/css/asosiy.css

Terminalda (vaqt sizda boshqa bo'ladi):

[2026-09-30 12:54] Compiled scss\asosiy.scss to assets\css\asosiy.css.
Sass is watching for changes. Press Ctrl-C to stop.

Tarjimasi: "scss\asosiy.scss assets\css\asosiy.css ga kompilyatsiya qilindi. Sass o'zgarishlarni kuzatyapti. To'xtatish uchun Ctrl-C bosing." Endi .scss ni saqlagan zahoti CSS yangilanadi, Live Server esa sahifani yangilaydi. Terminal band bo'ladi — boshqa buyruqlar uchun VS Code'da ikkinchi terminal oching.

3.5 Buyruqlarni scripts ga

Uzun buyruqlarni package.json ga yozib qo'yamiz (Kod uslubi darsidagi kabi):

{
  "scripts": {
    "css": "sass --watch scss/asosiy.scss assets/css/asosiy.css",
    "build:css": "sass -s compressed --no-source-map scss:assets/css"
  }
}

• npm run css — yozish paytida, kuzatuvchi rejim.
• npm run build:css — saytga yuklashdan oldin. scss:assets/css — "scss papkasidan assets/css ga" (pastda, partial'lar bo'limida ko'ramiz). -s compressed — --style=compressed ning qisqa yozuvi: bo'sh joy va qator ko'chirishlarni olib tashlaydi:

body{background-color:#fffaf0}h1{color:#2f6b3a}.narx{color:#b4461a;font-weight:bold}

Bu siqilgan fayl o'qishga emas, tez yuklanishga mo'ljallangan. Uni qo'lda tahrirlamang — keyingi kompilyatsiya ustidan yozib yuboradi.

4. O'zgaruvchilar: $

4.1 E'lon va ishlatish

Sass o'zgaruvchisi $ bilan boshlanadi, keyin nom, ikki nuqta va qiymat: $rang-asosiy: #2f6b3a;. Ishlatish — shunchaki nomini yozish: color: $rang-asosiy;. Nom qoidalari CSS o'zgaruvchisinikiga o'xshaydi: kichik harf, so'zlar orasida chiziqcha.

O'zgaruvchi blok ichida e'lon qilinsa, faqat o'sha blokda ko'rinadi:

.taom-karta {
  $ichki: 1rem;
  padding: $ichki;
}

.narx {
  margin: $ichki;
}

Terminalda:

Error: Undefined variable.
  ╷
7 │   margin: $ichki;
  │           ^^^^^^
  ╵
  r.scss 7:11  root stylesheet

Tarjimasi: "Xato: aniqlanmagan o'zgaruvchi." Sass qator va ustun raqamini (7:11) aytadi, xato joyini ^^^^ bilan chizib ko'rsatadi. Brauzer xato CSS'ni jim tashlasa, Sass xato bilan to'xtaydi va CSS faylni yozmaydi. Bu yaxshi: xato saytga chiqmaydi.

4.2 Sass $ va CSS --: qachon qaysi

CSS o'zgaruvchilari 1 darsida farqni ko'rgan edik: Sass o'zgaruvchisi — bosmaxonada chop etilgan menyu, CSS o'zgaruvchisi — bo'r bilan yoziladigan taxta. Endi amalda:

Media query'ni alohida ko'raylik. Media queries darsida "breakpointlar bir joyda yozilsin, buni Sass kabi vositalar qiladi" degan edik. Sababi: brauzer @media (width >= var(--planshet)) ni tushunmaydi — var() media shartida ishlamaydi. CSS'ning o'z yechimi @custom-media esa Baseline ma'lumotiga ko'ra hali hech bir asosiy brauzerda yo'q. Sass o'zgaruvchisi esa kompilyatsiyada oddiy qiymatga aylanadi:

$planshet: 40rem;

.taom-karta {
  padding: 1rem;

  @media (width >= $planshet) {
    padding: 1.5rem;
  }
}

Natija — oddiy @media (width >= 40rem). Breakpoint endi bitta joyda.

Zamonaviy qoida: ranglar va o'zgaradigan qiymatlar — CSS o'zgaruvchisida, breakpointlar va hisoblash — Sass'da. Ikkalasini birlashtirish ham mumkin: Sass o'zgaruvchisidan CSS o'zgaruvchisi yasash. Shunda "interpolyatsiya" kerak — keyingi bo'limdagi tuzoqni ko'ring.

4.3 Tuzoq: CSS o'zgaruvchisiga Sass qiymati

$rang-asosiy: #2f6b3a;

:root {
  --rang-asosiy: $rang-asosiy;
}

Kutilgan natija --rang-asosiy: #2f6b3a;. Haqiqatda Sass -- bilan boshlangan xususiyat qiymatiga tegmaydi — uni har qanday matn bo'lishi mumkin deb, o'zgarishsiz qoldiradi. Natijada brauzerga $rang-asosiy degan so'z boradi. Xato ham chiqmaydi.

To'g'risi — interpolyatsiya (interpolation), #{}: "shu yerga qiymatni qo'y".

$rang-asosiy: #2f6b3a;

:root {
  --rang-asosiy: #{$rang-asosiy};
}

Endi natija --rang-asosiy: #2f6b3a; — tekshirdik.

Tekshirib ko'ring: «Bahor»ga qorong'i rejim kerak. Asosiy rangni $rang-asosiy da saqlaysizmi yoki --rang-asosiy da?

5. Nesting: ichma-ich qoidalar

5.1 Oddiy nesting

Native CSS nesting darsida qoidani qoida ichiga yozishni ko'rgan edik. Sass buni 2006-yildan beri qiladi:

.taom-karta {
  padding: 1rem;
  border: 2px solid $rang-asosiy;

  h3 {
    margin-top: 0;
  }

  .narx {
    color: $rang-urgu;
  }
}

Sass ichki qoidalarni "yoyib" chiqaradi — ota selektorni oldiga qo'shadi:

.taom-karta {
  padding: 1rem;
  border: 2px solid #2f6b3a;
}
.taom-karta h3 {
  margin-top: 0;
}
.taom-karta .narx {
  color: #b4461a;
}

5.2 & — ota selektor

& — "ota selektorning o'zi". U bo'sh joysiz yopishganda holat yoki modifikator qo'shadi:

.taom-karta {
  &:hover {
    border-color: $rang-urgu;
  }

  &.tugadi {
    opacity: 0.6;
  }
}

Natija: .taom-karta:hover va .taom-karta.tugadi. & siz yozilsa (:hover { ... }), orada bo'sh joy paydo bo'lardi — .taom-karta :hover, ya'ni "karta ichidagi hover qilingan har qanday element". Bu boshqa ma'no.

Sass'da & bilan nom davom ettirish ham mumkin:

.taom {
  &-karta {
    border-radius: 0.5rem;
  }

  &-nomi {
    font-weight: bold;
  }
}

Natija — .taom-karta va .taom-nomi. BEM loyihalarida (CSS metodologiyalari) &__element va &--modifikator shu yo'l bilan yoziladi. Faqat ehtiyot bo'ling: kodda .taom-nomi ni qidirsangiz, topolmaysiz — nom bo'laklarga ajralgan.

Kompilyatsiya qilingan kartaning brauzerdagi ko'rinishi:

<style>
  .taom-karta {
    max-width: 16rem;
    margin-block-end: 0.5rem;
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
    font-family: system-ui, sans-serif;
  }
  .taom-karta h3 {
    margin-top: 0;
  }
  .taom-karta .narx {
    color: #b4461a;
  }
  .taom-karta:hover {
    border-color: #b4461a;
  }
  .taom-karta.tugadi {
    opacity: 0.6;
  }
  .taom-nomi {
    font-weight: bold;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <p class="narx">35 000 so'm</p>
</article>
<article class="taom-karta tugadi">
  <h3 class="taom-nomi">Manti</h3>
  <p class="narx">30 000 so'm — tugadi</p>
</article>

Nimaga qarang: ikkinchi karta xiraroq — &.tugadi dan chiqqan .taom-karta.tugadi ishladi. Sichqonchani kartaga olib borsangiz, chegara qizg'ishga o'tadi. Brauzer bu yerda Sass'ni emas, uning natijasini ko'ryapti.

5.3 Native nesting'dan farqi

Brauzerning o'z nesting'i ham & ni tushunadi. Lekin &-nomi kabi nom davomini tushunmaydi — u yangi class yasamaydi:

<style>
  .taom {
    &-karta {
      padding: 1rem;
      border: 2px solid #2f6b3a;
    }
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>

Nimaga qarang: kartada chegara ham, ichki bo'sh joy ham yo'q. Chrome'da tekshirdik: native nesting'da & — butun selektorning o'rinbosari, matn bo'lagi emas. &-karta dan .taom-karta yasalmaydi va qoida hech kimga tegmaydi. Sass esa bu yerda .taom-karta yasardi.

5.4 @media ham ichkarida

Sass @media ni qoida ichidan tashqariga "ko'taradi" va selektorni ichiga qo'yadi. Yuqoridagi $planshet misolidan:

.taom-karta {
  padding: 1rem;
}
@media (width >= 40rem) {
  .taom-karta {
    padding: 1.5rem;
  }
}

Qulayligi: kartaning hamma holati — oddiy, hover, planshet — bitta joyda.

5.5 Chuqur nesting — tuzoq

Nesting qulay bo'lgani uchun uni haddan oshirib yuborish oson:

.menyu {
  ul {
    li {
      .taom-karta {
        .narx {
          color: $rang-urgu;
        }
      }
    }
  }
}

Natija — .menyu ul li .taom-karta .narx: besh bo'lakli selektor, og'irligi (0,3,2) (Specificity). Uni keyin bosib o'tish uchun yanada og'irroq selektor kerak bo'ladi. HTML biroz o'zgarsa (ul o'rniga div), qoida jim ishlamay qoladi.

Jamoalardagi qoida: nesting chuqurligi 3 dan oshmasin, yaxshisi 2. Ichma-ich yozishdan oldin so'rang: "bu selektorga shuncha bo'lak rostdan kerakmi?" Ko'pincha .taom-karta .narx yetarli.

Tekshirib ko'ring: .aksiya { a { &:hover { color: red; } } } qanday selektorga aylanadi?

6. Partial fayllar va modullar

6.1 Partial: _ bilan boshlangan fayl

CSS metodologiyalari darsidagi bo'linishni Sass'da qilamiz. Fayl nomi _ bilan boshlansa, bu partial — "bo'lak": u alohida CSS faylga aylanmaydi, faqat boshqa faylga ulanadi.

scss/
├── _ranglar.scss   ← palitra
├── _ekranlar.scss  ← breakpointlar
├── _karta.scss     ← taom kartasi
└── asosiy.scss     ← kirish: hammasini yig'adi

scss/_ranglar.scss:

// Faqat o'zgaruvchilar — CSS chiqarmaydi
$asosiy: #2f6b3a;
$urgu: #b4461a;
$fon: #fffaf0;
$matn: #1f2a24;

scss/_ekranlar.scss:

// Breakpointlar — bitta joyda (Media queries darsi)
$planshet: 40rem;
$kompyuter: 64rem;

Butun papkani ham kompilyatsiya qilsa bo'ladi: npx sass scss:assets/css ("scss papkasidan assets/css ga"). Tekshirdik: assets/css da faqat asosiy.css paydo bo'ldi. Uchta partial alohida faylga aylanmadi — _ shuning uchun kerak.

6.2 @use — modulni ulash

scss/_karta.scss:

@use "ranglar";
@use "ekranlar";

.taom-karta {
  padding: 1rem;
  border: 2px solid ranglar.$asosiy;

  .narx {
    color: ranglar.$urgu;
  }

  @media (width >= ekranlar.$planshet) {
    padding: 1.5rem;
  }
}

scss/asosiy.scss:

@use "ranglar";
@use "karta";

body {
  color: ranglar.$matn;
  background-color: ranglar.$fon;
}

@use "ranglar" — "_ranglar.scss ni ula". Pastki chiziq va .scss yozilmaydi, Sass ularni o'zi topadi. Har ulangan fayl — modul, va uning o'zgaruvchilari modul nomi bilan olinadi: ranglar.$asosiy. Bu nom namespace ("nom maydoni") deb ataladi.

Nega namespace kerak? Ikkala modulda ham $asosiy bo'lishi mumkin — masalan, ranglarda va shriftlarda. ranglar.$asosiy va shriftlar.$asosiy hech qachon adashmaydi. Xuddi maktabdagi ikki Ali kabi: "7-B dagi Ali" desangiz, kimligi aniq.

Namespace'siz yozsangiz:

Error: Undefined variable.
  ╷
4 │   color: $asosiy;
  │          ^^^^^^^
  ╵
  a.scss 4:10  root stylesheet

Uzun nomni qisqartirish mumkin: @use "ranglar" as r; → r.$asosiy. Yoki umuman olib tashlash: @use "ranglar" as *; → $asosiy. Ikkinchisini faqat bitta-ikkita, nomlari to'qnashmaydigan modulda ishlating — aks holda namespace'ning foydasi yo'qoladi.

asosiy.css natijasi:

.taom-karta {
  padding: 1rem;
  border: 2px solid #2f6b3a;
}
.taom-karta .narx {
  color: #b4461a;
}
@media (width >= 40rem) {
  .taom-karta {
    padding: 1.5rem;
  }
}

body {
  color: #1f2a24;
  background-color: #fffaf0;
}

Bitta fayl, bitta so'rov. CSS metodologiyalari darsida o'lchagan @import kutishlari yo'q: yig'ish brauzerda emas, kompyuteringizda bo'ldi.

6.3 @use qoidalari

Birinchi qatorlarda. @use har qanday qoidadan oldin yoziladi:

Error: @use rules must be written before any other rules.
  ╷
5 │ @use "ranglar";
  │ ^^^^^^^^^^^^^^
  ╵
  b.scss 5:1  root stylesheet

Tarjimasi: "@use qoidalari boshqa har qanday qoidadan oldin yozilishi kerak."

Bir marta yuklanadi. Modul CSS chiqarsa ham (masalan, _aksiya.scss da .aksiya { ... } bo'lsa), uni ikki fayl @use qilsa ham, natijada bu CSS bir marta chiqadi. Tekshirdik: asosiy.scss ham, _karta.scss ham @use "aksiya" qildi — .aksiya qoidasi CSS'da bitta.

Yopiq a'zolar. Nomi - yoki _ bilan boshlangan o'zgaruvchi — modulning "ichki ishi":

// _olcham.scss
$-ichki: 4px;
$qadam: $-ichki * 4;

olcham.$qadam ni boshqa fayldan olsa bo'ladi (natija 16px), olcham.$-ichki ni esa yo'q:

Error: Private members can't be accessed from outside their modules.

Tarjimasi: "Yopiq (private) a'zolarga moduldan tashqaridan murojaat qilib bo'lmaydi." Oshxonadagi retsept daftari kabi: taom menyuda bor, lekin retsept — oshpazniki.

6.4 @forward — bir nechta modulni bitta eshikdan

Komponentlar ko'payganda har faylning boshida bir xil @use lar yig'iladi. @forward "shu modulni o'tkazib yubor" degani. Bitta yig'uvchi fayl yasaymiz:

// _sozlamalar.scss
@forward "ranglar";
@forward "olcham";

Endi komponent bitta @use bilan ikkalasini oladi:

@use "sozlamalar";

.narx {
  color: sozlamalar.$urgu;
  padding: sozlamalar.$qadam;
}

Natija:

.narx {
  color: #b4461a;
  padding: 16px;
}

Farqini eslab qoling: @use — "men ishlataman", @forward — "mendan foydalanganlarga ham ber". Kutubxonalar (masalan, Bootstrap) o'z ichki fayllarini shunday bitta "eshik" orqali ochadi.

flowchart TD
  R["_ranglar.scss"] -->|"@forward"| S["_sozlamalar.scss"]
  O["_olcham.scss"] -->|"@forward"| S
  S -->|"@use"| K["_karta.scss"]
  S -->|"@use"| A["asosiy.scss"]
  K -->|"@use"| A
  A --> C["asosiy.css"]

Nimaga qarang: komponent fayllar palitra qayerda yashashini bilmaydi — ular faqat sozlamalar ni taniydi. Ertaga ranglarni boshqa faylga ko'chirsangiz, faqat _sozlamalar.scss o'zgaradi.

Tekshirib ko'ring: _karta.scss da @use "sozlamalar"; bor. Unda ranglar.$urgu deb yozish mumkinmi?

6.5 @import — eskirgan

Eski Sass kodida @use o'rniga @import "ranglar"; ni ko'rasiz. Dart Sass hozir uni ogohlantirish bilan bajaradi:

DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

Tarjimasi: "Eskirish ogohlantirishi: Sass'dagi @import qoidalari eskirgan va Dart Sass 3.0.0 da olib tashlanadi. Batafsil ma'lumot va avtomatik ko'chiruvchi — havolada."

Nega voz kechildi? @import hamma o'zgaruvchini bitta umumiy "qozon"ga tashlaydi — qaysi nom qayerdan kelgani noma'lum. Yana: bir faylni ikki joydan import qilsangiz, uning CSS'i ikki marta chiqadi. Tekshirdik: _aksiya.scss ikki yo'l bilan import qilinganda, .aksiya qoidasi natijada ikki marta takrorlandi. @use da esa — bir marta.

Eski loyihani @use ga o'tkazish uchun rasmiy vosita bor:

npx --yes sass-migrator module e.scss

Tekshirdik (sass-migrator 2.6.1): @import "ranglar"; va $asosiy avtomatik ravishda @use "ranglar"; va ranglar.$asosiy ga almashdi.

Diqqat: Sass'dagi @import va CSS'dagi @import url("...") — boshqa-boshqa narsa. Birinchisini Sass kompilyatsiyada bajaradi va eskirgan. Ikkinchisi brauzerda ishlaydi (CSS metodologiyalari darsidagi asosiy.css). Sass url() li yoki .css bilan tugagan importni tegmasdan CSS'ga o'tkazib yuboradi.

7. Vite'da Sass

Keyinroq loyihalar Vite bilan quriladi — kodni yig'ib, brauzerga tayyorlaydigan vosita (bundler). Uni Vite I darsida o'rganamiz, hozir bilish shart emas. Bir faktni bilib qo'ying: Vite'da Sass uchun alohida buyruq kerak emas. .scss faylni to'g'ridan-to'g'ri ulaysiz, Vite o'zi kompilyatsiya qiladi.

Faqat Sass paketi o'rnatilgan bo'lishi kerak. Vite 8.3.1 bilan tekshirdik — paket yo'q bo'lsa, build shunday to'xtaydi:

Error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.

Tarjimasi: "Preprotsessor bog'liqligi sass-embedded topilmadi. O'rnatdingizmi? npm install -D sass-embedded ni sinab ko'ring." Uni o'rnatgach, .scss odatdagidek CSS'ga aylandi.

8. Bugun Sass kerakmi?

CSS'ning o'zi ko'p narsani o'rgandi: o'zgaruvchilar (CSS o'zgaruvchilari 1), nesting (Native CSS nesting), color-mix() (Ranglar 3), @layer (Kaskadni boshqarish). Shuning uchun yangi kichik loyihada Sass'siz ham yaxshi yashasa bo'ladi. Qaror jadvali:

Sass'ning bugungi eng katta kuchi — o'zgaruvchi emas, mixin, funksiya va sikllar: bir marta yozib, o'nlab qoidani avtomatik yasash. Ularni keyingi darsda ko'ramiz.

9. Ko'p uchraydigan xatolar

9.1 .css faylni qo'lda tahrirlash

assets/css/asosiy.css da rangni to'g'ridan-to'g'ri o'zgartirdingiz, sahifa yangilandi. Ertasiga .scss ni saqlagan zahoti o'zgarishingiz yo'qoldi — Sass faylni butunlay qayta yozdi. Tuzatish: o'zgarish faqat scss/ da. Kompilyatsiya qilingan fayl — natija, manba emas.

9.2 Xato boshqa qatorni ko'rsatadi

$rang: #2f6b3a

h1 {
  color: $rang;
}

Error: expected ";".
  ╷
3 │ h1 {
  │    ^
  ╵
  l.scss 3:4  root stylesheet

Xato 1-qatorda (; unutilgan), Sass esa 3-qatorni ko'rsatadi. Nega? Sass #2f6b3a dan keyin ; ni ko'rmadi va qiymat davom etyapti deb o'yladi: #2f6b3a h1 — ikki so'zli qiymat bo'lishi mumkin. Faqat { ga yetganda "bu qiymatda bo'lmaydi" deb to'xtadi. Qoida: ko'rsatilgan qatorda xato topilmasa — undan oldingi qatorni tekshiring.

9.3 --rang: $rang ishlamaydi

Natijada --rang-asosiy: $rang-asosiy; qoladi, xato chiqmaydi. Tuzatish: --rang-asosiy: #{$rang-asosiy}; — yuqorida, "Tuzoq" bo'limida.

9.4 --watch ishlamayapti

.scss ni saqladingiz, sahifa o'zgarmadi. Ko'pincha kuzatuvchi terminal yopilgan yoki kompilyatsiya xatosida to'xtab turibdi — terminaldagi qizil xabarni o'qing. Tuzatish: xatoni tuzating yoki npm run css ni qayta ishga tushiring.

9.5 Namespace'siz o'zgaruvchi

@use "ranglar"; dan keyin $asosiy yozildi → Undefined variable. Tuzatish: ranglar.$asosiy, yoki @use "ranglar" as *;.

10. Mashqlar

Mashqlar kurs/mashqlar/06/<mashq>/ da: package.json, scss/ va assets/css/. Har papkada avval npm install --save-dev sass.

1-mashq (oson): CSS'ni Sass'ga

.aksiya {
  color: #b4461a;
  border-block: 2px solid #b4461a;
}

.bron-havola {
  background-color: #2f6b3a;
  color: #fffaf0;
}

.bron-havola:hover {
  background-color: #1a5d1a;
}

Uni scss/asosiy.scss ga ko'chiring: to'rtta rang $ o'zgaruvchiga, :hover — & bilan ichkariga. npx sass --no-source-map bilan kompilyatsiya qiling va natija asl CSS bilan bir xil ekanini tekshiring.

Ishora: o'zgaruvchi nomlari «Bahor» palitrasidagi kabi — $rang-urgu, $rang-asosiy, $rang-asosiy-toq, $rang-fon.

$rang-asosiy: #2f6b3a;
$rang-asosiy-toq: #1a5d1a;
$rang-urgu: #b4461a;
$rang-fon: #fffaf0;

.aksiya {
  color: $rang-urgu;
  border-block: 2px solid $rang-urgu;
}

.bron-havola {
  background-color: $rang-asosiy;
  color: $rang-fon;

  &:hover {
    background-color: $rang-asosiy-toq;
  }
}

2-mashq (o'rta): menyuni nesting bilan

header nav ul {
  display: flex;
  gap: 1rem;
}

header nav a {
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

header nav a[aria-current="page"] {
  font-weight: bold;
}

Buni nesting bilan qayta yozing. Talab: natija selektorlari aynan shunday qolsin, nesting chuqurligi 3 dan oshmasin.

Ishora: header nav — tashqi blok. a ning holatlari &:hover va &[aria-current="page"].

header nav {
  ul {
    display: flex;
    gap: 1rem;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

3-mashq (qiyin): buzilgan modullar

Stajyor «Bahor»ni modullarga bo'ldi, lekin kompilyatsiya ishlamayapti:

// asosiy.scss
body {
  margin: 0;
}

@use "ranglar";

.narx {
  color: $urgu;
}

:root {
  --rang-asosiy: ranglar.$asosiy;
}

_ranglar.scss — «Partial fayllar» bo'limidagi fayl. 1) Sass qaysi xatoni birinchi ko'rsatadi? 2) Hamma xatoni tuzating. 3) Qaysi xato Sass tuzatishlardan keyin ham jim qoladi va nega?

Ishora: xatolar "qatlam-qatlam" — birinchisini tuzatsangiz, keyingisi chiqadi.

@use "ranglar";

body {
  margin: 0;
}

.narx {
  color: ranglar.$urgu;
}

:root {
  --rang-asosiy: #{ranglar.$asosiy};
}

4-mashq: Portfolio qadami — portfolio CSS'i Sass ko'zi bilan

Portfolio oddiy CSS'da qoladi: u kichik va build qadamisiz GitHub Pages'ga yuklanadi. Lekin Sass bilan tajriba qilib, ikki narsani o'z kodingizda ko'rasiz: "har qanday CSS — to'g'ri SCSS" va nesting natijasi.

1. Portfolio ildizida (sayt/ dan tashqarida — saytga yuklanmaydi) tajriba/ papkasini yarating va Sass'ni o'rnating: npm install --save-dev sass.
2. sayt/assets/css/komponentlar.css ni (CSS metodologiyalari darsida bo'lingan fayl) tajriba/komponentlar.scss nomi bilan nusxalang va kompilyatsiya qiling: npx sass --no-source-map tajriba/komponentlar.scss tajriba/natija.css. Xato chiqdimi? Ikkala faylni VS Code'da solishtiring: Explorer'da birinchisini o'ng tugma → Select for Compare, ikkinchisini → Compare with Selected.
3. natija.css da non yo'li bo'limini toping. Uni Native CSS nesting darsida brauzerning o'z nesting'i bilan ichma-ich yozgan edingiz. Sass bu blokni qanday chiqardi — nechta qoida bo'ldi?
4. Xulosa yozing: portfolio'ga Sass kerakmi?

Ishora: & li ichma-ich yozuv — CSS'da ham, Sass'da ham bir xil ko'rinadi. Farq — kim uni o'qiydi: brauzermi yoki kompilyator.

nav[aria-label="Non yo'li"] {
  margin-block-start: var(--masofa-m);
  font-size: var(--step--1);
}
nav[aria-label="Non yo'li"] ol {
  display: flex;
  gap: var(--masofa-xs);
}
nav[aria-label="Non yo'li"] li {
  display: flex;
  flex: none;
}
nav[aria-label="Non yo'li"] li + li::before {
  content: "/"/"";
  margin-inline-end: var(--masofa-xs);
  color: var(--rang-ikkinchi);
}
nav[aria-label="Non yo'li"] li:last-child {
  flex-shrink: 1;
  min-width: 0;
}
nav[aria-label="Non yo'li"] [aria-current=page] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

11. Real ishda

• Katta loyihalar. Bootstrap 5, ko'plab korporativ saytlar va admin panellar SCSS'da. Ularda _variables.scss, _mixins.scss kabi partial'lar va bitta kirish fayli bo'ladi — bugun o'rgangan tuzilma.
• Kutubxonani sozlash. Kutubxonalar o'zgaruvchilarini !default bilan yozadi — "foydalanuvchi bermasa, shu qiymat". Siz esa @use "mavzu" with ($bosh: #1a5d1a); bilan o'zingiznikini berasiz. Tekshirdik: with dagi rang !default qiymatni almashtirdi. Bootstrap'ni shu yo'l bilan brend rangiga moslash CSS freymvorklar darsida.
• Vite, Angular, Next.js — Sass'ni .scss fayl import qilinganda o'zi taniydi, faqat sass yoki sass-embedded paketi o'rnatilgan bo'lsin.
• Intervyuda so'raladi: "Sass o'zgaruvchisi CSS o'zgaruvchisidan nimasi bilan farq qiladi?", "@use va @import farqi?", "Nesting'ning xavfi nima?". Endi uchalasiga ham javob bera olasiz.

Xulosa

• Sass — preprotsessor: .scss → sass dasturi → .css. Brauzer faqat natija CSS'ni ko'radi.
• Tirik versiya — Dart Sass (sass paketi); node-sass va LibSass to'xtatilgan.
• $o'zgaruvchi kompilyatsiyada qiymatga aylanadi: media query uchun qulay, qorong'i rejim uchun — CSS -- o'zgaruvchisi. Ularni #{} bilan bog'lang.
• Nesting va & — qulay, lekin chuqurlik ≤ 3. &-nomi davomi faqat Sass'da ishlaydi.
• Fayllar — _partial.scss, ulash — @use (namespace bilan), yig'uvchi — @forward. @import eskirgan.

Keyingi dars: Sass/SCSS 2: mixin, funksiya, map va boshqaruv — bir marta yozib, o'nlab qoidani avtomatik yasaydigan vositalarni o'rganamiz.

Manbalar

• Sass rasmiy hujjati: "Syntax", "Variables", "Style Rules", "@use", "@forward" — sass-lang.com/documentation
• Sass: "@import is Deprecated" — sass-lang.com/d/import
• Sass Migrator — sass-lang.com/documentation/cli/migrator
• Vite: "CSS Pre-processors" — vite.dev/guide/features