2-modul: Advanced CSS & UI Foundations

1-dars. SCSS asoslari

SCSS — CSS ning kuchaytirilgan varianti: o'zgaruvchi, ichma-ich yozish, funksiya bor. Brauzer uni tushunmaydi, shuning uchun oddiy CSS ga kompilyatsiya qilinadi. Har bir oddiy CSS kodi SCSS ham hisoblanadi.

npm install -g sass
sass style.scss style.css
sass --watch style.scss:style.css   # o'zgarsa avto kompilyatsiya

2-dars. Nesting & Variables

O'zgaruvchi ($) rang, o'lcham kabi qiymatni bir joyda saqlaydi: brend rangi o'zgarsa, bitta joyni tuzatasiz. Nesting ichma-ich yozish imkonini beradi, & joriy selektorni bildiradi. Ichma-ich 3 darajadan oshirmang.

$primary: #4f46e5;
$radius: 8px;

.btn {
  background: $primary;
  border-radius: $radius;
  &:hover { background: darken($primary, 10%); }
  .icon { margin-right: 8px; }
}

3-dars. Mixins

Mixin — qayta ishlatiladigan uslublar to'plami. Bir xil kodni takror yozmaslik uchun. Parametr ham qabul qiladi, xuddi funksiya kabi.

@mixin flex-center($dir: row) {
  display: flex;
  flex-direction: $dir;
  justify-content: center;
  align-items: center;
}

.hero { @include flex-center(column); }
.badge { @include flex-center; }

4-dars. BEM metodologiyasi

BEM — class nomlash qoidasi: Block__Element--Modifier. Katta loyihada class nomlari chalkashib ketmasligi uchun kerak.

Block — mustaqil qism (card), Element — uning bo'lagi (card__title), Modifier — variant (card--featured).

<div class="card card--featured">
  <h3 class="card__title">Sarlavha</h3>
  <button class="card__btn">Batafsil</button>
</div>

.card { &__title { font-size: 20px; } &--featured { border: 2px solid gold; } }

5-dars. Transition & Animations

Transition — ikki holat orasidagi silliq o'tish (masalan, hover). @keyframes — o'zingiz bosqichlarini belgilaydigan animatsiya. Ikkalasi ham 60fps uchun asosan transform va opacity bilan ishlasin.

.btn { transition: background .3s ease, transform .2s; }
.btn:hover { transform: translateY(-2px); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal { animation: fade-in .5s ease forwards; }

6-dars. Transformlar

Transform elementni joyini buzmasdan siljitadi, kattalashtiradi yoki aylantiradi: translate, scale, rotate. Boshqa elementlar o'z joyida qoladi, shuning uchun animatsiyada tez ishlaydi.

.card:hover { transform: scale(1.05) rotate(1deg); }
.arrow { transform: translateX(10px); }
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

7-dars. UI prinsiplar

Chiroyli interfeys sehr emas, bir necha qoidadan iborat:
• Iyerarxiya: muhim narsa kattaroq va qalinroq.
• Bo'shliq: 8px tizimi (8, 16, 24, 32) ishlating.
• Kontrast: matn foni bilan yaxshi ajralsin (kamida 4.5:1).
• Izchillik: bir xil element hamma joyda bir xil ko'rinsin.
• Ko'pi bilan 2 ta shrift va 1 ta asosiy rang.

:root {
  --space-1: 8px; --space-2: 16px; --space-3: 24px;
  --text: #1a1a1a; --muted: #6b7280;
}

8-dars. Figma'dan HTML/CSS

Dizayner Figma da maket chizadi, siz uni kodga o'giriladi. Elementni tanlab Inspect/Dev Mode da rang, shrift, o'lcham va bo'shliqlarni ko'rasiz. Figma dagi Auto Layout aynan Flexbox ga mos keladi.

Ish tartibi: avval umumiy maketni (Grid/Flex), keyin komponentlarni, oxirida detallarni yozing. Ranglar va shriftlarni CSS o'zgaruvchisiga chiqarib oling.

/* Figma dagi "Auto Layout, gap 16, padding 24" */
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

9-dars. Dark/Light mod

Ranglarni CSS o'zgaruvchisida saqlasangiz, mavzu almashtirish oson: faqat o'zgaruvchi qiymatlari o'zgaradi. Foydalanuvchi tizim sozlamasini prefers-color-scheme bilan aniqlaymiz, tugma bilan esa data-theme orqali qo'lda almashtiramiz.

:root { --bg: #fff; --text: #111; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}
[data-theme="dark"] { --bg: #111; --text: #eee; }
body { background: var(--bg); color: var(--text); }

10-dars. Tailwind intro

Tailwind — tayyor utility classlar to'plami. CSS yozish o'rniga HTML ichida class beriladi: p-4 = padding 16px. Afzalligi: tez ishlash. Kamchiligi: HTML uzun bo'ladi, shuning uchun komponentlarga ajratish kerak.

<button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
  Yuborish
</button>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">...</div>

11-dars. Component-based UI

Interfeysni kichik, mustaqil bo'laklarga bo'lamiz: button, card, input, modal. Har bir bo'lak variantlarga ega (o'lcham, rang, holat). Bu fikrlash tarzi keyingi oylarda React ga o'tishda juda asqotadi.

.btn { padding: 10px 18px; border-radius: 8px; border: 0; cursor: pointer; }
.btn--primary { background: #4f46e5; color: #fff; }
.btn--outline { background: none; border: 2px solid #4f46e5; }
.btn--sm { padding: 6px 12px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

12-dars. Mini UI Kit loyihasi

O'zingizning kichik UI kitingizni yig'ing va bitta sahifada namoyish qiling.

Tarkibi: ranglar paleti, tipografiya, 3 xil tugma (+ holatlari), input va forma, card, badge, alert, dark/light almashtirgich.
Talablar: SCSS (o'zgaruvchi + mixin), BEM nomlash, hover animatsiyalari.

ui-kit/
├── index.html
└── scss/
    ├── _variables.scss
    ├── _mixins.scss
    ├── components/
    │   ├── _button.scss
    │   └── _card.scss
    └── main.scss