რა არის CSS-ის კასტომ თვისებები (ცვლადები)?

Question

Accepted Answer

**CSS-ის კასტომ თვისებები** (ცვლადები) საშუალებას გაძლევთ მნიშვნელობა ერთხელ შენახოთ და მრავალჯერ გამოიყენოთ. პრეპროცესორის (Sass) ცვლადებისგან განსხვავებით, ისინი **ცოცხალი არიან გაშვების დროს** — ისინი გადაკასკადება, მემკვიდრეობით გადაეცემა და შეიძლება შეიცვალოს JavaScript-ით ან მედია შেკითხვებით.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## მოხმარების მნიშვნელობები

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## ისინი გადაკასკადება და შეიძლება იყოს scoped/გადანიშნული

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

მემკვიდრეობის გამო, მშობელზე დაყენებული ცვლადი ხელმისაწვდომია ყველა შთამომავლისთვის და შეიძლება გადანიშნულ იყოს ქვეტყეში — რაც Sass ცვლადებმა (რომლებიც აკომპილირებული არიან) ვერ შეძლებენ.

## მკილების ფიჩური: გაშვების დროის თემა

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

თემის მთელი დიაპაზონი შეცვალეთ რამდენიმე ცვლადის ხელახლა განსაზღვრით — რეპლიკირებული წესების გარეშე. თქვენ ასევე შეგიძლიათ ეს გააკეთოთ JS-ში:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

ეს მხოლოდ რაოდენობით აახლებს ყველა ელემენტს, რომელიც ამ ცვლადს იყენებს — შეუძლებელია აკომპილირებული Sass ცვლადებით.

## რატომ არის მნიშვნელოვანი

CSS ცვლადები არის თანამედროვე **თემატიზაციისა და დიზაინის ტოკენების** საფუძველი: განსაზღვრეთ ფერი/დათოლველობა ერთხელ, გამოიყენეთ ყველგან და გაცვალეთ თემები (მუქი რეჟიმი, ბრენდის ვარიანტები) გაშვების დროს მედია შეკითხვების ან JavaScript-ის მეშვეობით.

ისინი აღარ დუბლირებული მნიშვნელობებს მოაქვთ გარკვეულ CSS-ში — ბილდის ნაბიჯი არ არის საჭირო.