Selector / Pseudo Değişkenler

Bu değişken ailesi selector tabanlı parçaları tekrar kullanmak içindir. Normal değer değişkenlerinden farkı şudur:

• :root içine yazılmaz
• CSS custom property üretmez
• derleme zamanında açılır

Compile-time macro

Bu değişkenler tarayıcıda yaşayan CSS değişkenleri değildir. var(--x) veya &var(--x) çağrıldığı yerde selector parçası derleme sırasında açılır.

---

İki Kullanım Biçimi

Söz dizimi	Ne yapar?
var(--x)	Selector bloğunu bağımsız veya nested context içinde açar
&var(--x)	Çözümlenen selector parçasını önceki metne boşluksuz ekler

Bu ayrım aynı aile içindeki iki kullanım biçimidir.

---

1) Selector Bloğu Olarak Kullanım

Bir selector bloğunu değişken olarak saklayıp var(--x) ile açabilirsiniz:

--card: .card { color: #ccc; };

var(--card);

Üretilen CSS:

.card {
  color: #ccc;
}

Nested context içinde:

--card: .card { color: #ccc; };

.card-top {
  padding: 16px;
  var(--card);
}

Üretilen CSS:

.card-top {
  padding: 16px;
}

.card-top .card {
  color: #ccc;
}

Bu çağrıda .card selector'ı üst bloğun altına açılır.

---

2) Pseudo / Composition Olarak Kullanım

Pseudo selector veya modifier parçaları için &var(--x) kullanılır:

--hovered: :hover { opacity: 0.85; };

.btn&var(--hovered);

Üretilen CSS:

.btn:hover {
  opacity: 0.85;
}

Bu kullanımda :hover, .btn sonuna boşluksuz eklenir.

Nested context içinde:

--hovered: :hover { opacity: 0.85; };

.card {
  padding: 16px;
  &var(--hovered);
}

Üretilen CSS:

.card {
  padding: 16px;
}

.card:hover {
  opacity: 0.85;
}

---

Birlikte Kullanım

Aynı blok içinde hem selector açma hem composition kullanılabilir:

--card: .card { color: #1a1a2e; };
--hovered: :hover { opacity: 0.85; };

.card-top {
  padding: 16px;
  var(--card);
  &var(--hovered);
}

Üretilen CSS:

.card-top {
  padding: 16px;
}

.card-top .card {
  color: #1a1a2e;
}

.card-top:hover {
  opacity: 0.85;
}

Burada:

• var(--card) alt selector açar
• &var(--hovered) aynı selector üzerinde composition yapar

---

Farklı Composition Örnekleri

Modifier Class

--open: .is-open { max-height: 500px; };

.drawer&var(--open);

Üretilen CSS:

.drawer.is-open {
  max-height: 500px;
}

Focus State

--focused: :focus-visible { outline: 2px solid #2060ff; outline-offset: 2px; };

.btn&var(--focused);

Üretilen CSS:

.btn:focus-visible {
  outline: 2px solid #2060ff;
  outline-offset: 2px;
}

---

Observed ile Birlikte

&var(...) ile üretilen final selector kuyruğuna ? veya ?! eklenebilir. Yani composition açıldıktan sonra oluşan selector observed olarak işlenir.

--hovered: :hover { opacity: 0.85; };
--active: .is-active { outline: 2px solid #2060ff; };

.card &var(--hovered)?   { transform: translateY(-2px); }
.card &var(--active)?!   { box-shadow: 0 10px 26px rgba(22, 61, 120, 0.18); }

Bu örneklerin selector karşılığı şudur:

• .card:hover?
• .card.is-active?!

Kural değişmez:

• marker en sonda olmalı
• boşluksuz yazılmalı
• pseudo ve modifier class composition aynı şekilde observed olabilir

---

Declaration Value İçinde &var(...)

&var(...) yalnızca selector'larda değil, declaration değerlerinde de çalışır.

--letters: [A-F];

.token {
  color: #AA&var(--letters[2]);
}

Üretilen CSS:

.token {
  color: #AAC;
}

Burada C değeri #AA sonuna boşluksuz eklenir.

---

CSS Değişkenlerinden Farkı

	CSS Değişkenleri	Selector / Pseudo Değişkenler
:root içine yazılır mı?	Evet	Hayır
CSS custom property olur mu?	Evet	Hayır
Yaşam süresi	Tarayıcıda çalışır	Derleme sırasında açılır
Tipik amaç	Renk, spacing, scalar değerler	Selector bloğu, pseudo, modifier, composition
Tipik söz dizimi	var(--x)	var(--x) veya &var(--x)