İçeriğe geç

@if / elseif / else

@if, derleme zamanında koşul değerlendirerek CSS üretir ya da üretmez.

Söz Dizimi

Section titled “Söz Dizimi”
@if(koşul) {
  /* koşul doğruysa üretilir */
}
elseif(koşul) {
  /* ilk koşul yanlış, bu doğruysa üretilir */
}
else {
  /* hiçbiri doğru değilse üretilir */
}

Temel Kullanım

Section titled “Temel Kullanım”
--theme: { accent: #00245a; };


@if(var(--theme.accent) === '#00245a') {
  .flag { color: #0c2b61; }
}
elseif(var(--theme.accent) === '#111111') {
  .flag { color: #222222; }
}
else {
  .flag { color: #333333; }
}

--theme.accent değeri #00245a olduğu için ilk dal üretilir.

Üretilen CSS:

.flag { color: #0c2b61; }

Desteklenen Operatörler

Section titled “Desteklenen Operatörler”
OperatörAnlam
===Eşit
!==Eşit değil
>Büyüktür
>=Büyük eşit
<Küçüktür
<=Küçük eşit
&&Ve
||Veya

Koşul literal notları:

  • Word-like string'ler tırnaksız yazılabilir: light, dark
  • Tırnaklı string'ler de geçerlidir: 'light', "dark"
  • === ve !== string karşılaştırması yapar
  • >, >=, <, <= için '1' veya "1" gibi sayı görünümlü string'ler sayıya dönüştürülerek karşılaştırılır

Parantez ile Koşul Gruplama

Section titled “Parantez ile Koşul Gruplama”

Karmaşık koşullarda parantez kullanılabilir.

--valuea: 2;
--valueb: 3;
--valuec: light;


@if((var(--valuea) > 1 || var(--valueb) === 4) && var(--valuec) === light) {
  .flag { color: #0c2b61; }
}

--valuea > 1 doğru olduğu için sol parantez grubu doğru, --valuec === light de doğru — koşul sağlanır.

Üretilen CSS:

.flag { color: #0c2b61; }

Derleme Zamanı Aritmetik Koşul

Section titled “Derleme Zamanı Aritmetik Koşul”

Koşul içinde compile-time aritmetik ve array index erişimi desteklenir.

--valuea: 1;
--valueb: 2;
--range: [1-5];


@if(var(--valuea) + var(--valueb) === 3) {
  .sum-ok { color: #0c2b61; }
}


@if(var(--range[2]) > "1") {
  .range-ok { color: #0c2b61; }
}

1 + 2 === 3 doğru, --range[2] değeri 3 ve 3 > 1 doğru — her iki kural da üretilir.

Üretilen CSS:

.sum-ok   { color: #0c2b61; }
.range-ok { color: #0c2b61; }

@for içinde @if

Section titled “@for içinde @if”

@for bloğu içinde @if kullanılabilir. Her iterasyonda koşul bağımsız olarak değerlendirilir.

--sizes: [sm, md, lg];


@for(size, var(--sizes)) {
  @if(${size} === 'sm') {
    .btn-${size} { padding: 4px 8px; }
  }
  elseif(${size} === 'md') {
    .btn-${size} { padding: 8px 16px; }
  }
  else {
    .btn-${size} { padding: 12px 24px; }
  }
}

Üretilen CSS:

.btn-sm { padding: 4px 8px; }
.btn-md { padding: 8px 16px; }
.btn-lg { padding: 12px 24px; }

Observed Selector ile Birlikte Kullanım

Section titled “Observed Selector ile Birlikte Kullanım”

@if bloğu içindeki observed selector'lar da derleme zamanı koşuluna göre değerlendirilir. Yalnızca koşulun doğru olduğu dal runtime'a taşınır; yanlış dal hiç üretilmez.

--mode: wide;


@if(var(--mode) === 'wide') {
  #panel? { display: block; }
}
else {
  #panel? { display: none; }
}

--mode değeri wide olduğu için yalnızca display: block kuralı üretilir ve runtime'a aktarılır.