Τι είναι οι εξατομικευμένες ιδιότητες CSS (μεταβλητές);

Question

Accepted Answer

**Οι εξατομικευμένες ιδιότητες CSS** (μεταβλητές) σας επιτρέπουν να αποθηκεύσετε τιμές μία φορά και να τις χρησιμοποιήσετε ξανά. Σε αντίθεση με τις μεταβλητές προεπεξεργαστή (Sass), είναι **ενεργές κατά την εκτέλεση** — εφαρμόζονται σε κασκάδα, κληρονομούνται και μπορούν να αλλάξουν με JavaScript ή media queries.

```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 */
```

## Εφαρμόζονται σε κασκάδα και μπορούν να οριστούν/παρακαμφθούν

```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 είναι το θεμέλιο των σύγχρονων **θεμάτων και design tokens**: ορίστε χρώματα/διαστήματα μία φορά, χρησιμοποιήστε τα παντού και εναλλάξτε θέματα (σκοτεινό mode, παραλλαγές brand) κατά την εκτέλεση μέσω media queries ή JavaScript.

Φέρνουν DRY και δυναμικές τιμές σε απλό CSS — χωρίς απαιτούμενο βήμα build.