@for

@for, bir dizi veya nesne üzerinde iterasyon yaparak her öğe için CSS üretir. Derleme zamanında çalışır; çıktı standart CSS'tir.

---

Söz Dizimi

@for(öğe, hedef) {
  /* her iterasyon için CSS */
}

${öğe} ile iterasyon değerine, ${öğe.key} ile nesne öğesinin alanlarına erişilir. ${...} içinde aritmetik, string birleştirme ve compile-time var() erişimi desteklenir.

Not

${...} ifade motorunun desteklediği tüm operatörler, var() erişim formları ve öncelik kuralları için İfade Motoru sayfasına gidin.

---

Temel Kullanım

Literal Dizi

@for(i, [1, 2, 3]) {
  .w-${i} { width: ${i * 10}px; }
}

Üretilen CSS:

.w-1 { width: 10px; }
.w-2 { width: 20px; }
.w-3 { width: 30px; }

Aralık söz dizimiyle de yazılabilir:

@for(i, [1-4]) {
  .p-${i} { padding: ${i * 4}px; }
}

---

Hedef Türleri

Array Değişkeni

--scale: [1-3];
--space: 4px;

@for(i, var(--scale)) {
  .m-${i} {
    margin: ${i} * var(--space);
  }
}

Üretilen CSS:

.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }

Nesne Dizisi

Array öğeleri nesne olduğunda ${öğe.key} ile alanlara erişilir.

--breakpoints: [
  { name: sm; size: 640px },
  { name: md; size: 768px },
  { name: lg; size: 1024px }
];

@for(bp, var(--breakpoints)) {
  @media (min-width: ${bp.size}) {
    .container-${bp.name} {
      max-width: ${bp.size};
    }
  }
}

Üretilen CSS:

@media (min-width: 640px) {
  .container-sm { max-width: 640px; }
}

@media (min-width: 768px) {
  .container-md { max-width: 768px; }
}

@media (min-width: 1024px) {
  .container-lg { max-width: 1024px; }
}

Bu yapı, @for içinde at-rule üretmenin en tipik örneğidir. Her iterasyonda ayrı bir @media bloğu açılır.

Nesting ile Birlikte

@for, nested selector blokları üretirken de kullanılabilir:

--variants: [sm, md];

@for(size, var(--variants)) {
  .card-${size} {
    .title {
      font-size: 14px;
    }
  }
}

Üretilen CSS:

.card-sm .title {
  font-size: 14px;
}

.card-md .title {
  font-size: 14px;
}

Nesne Key Döngüsü

@for(key, var(--obj)) kullanıldığında iterasyon değeri nesnenin key'leri olur. var(--obj[${key}]) ile o key'in değerine erişilir.

--alignContent: { normal: normal; start: flex-start; end: flex-end; };

@for(key, var(--alignContent)) {
  .content-${key} {
    align-content: var(--alignContent[${key}]);
  }
}

Üretilen CSS:

.content-normal { align-content: normal; }
.content-start  { align-content: flex-start; }
.content-end    { align-content: flex-end; }

Not

var(--obj[${key}]) erişimi yalnızca object değişken için geçerlidir. Object olmayan bir değere uygulanırsa invalid-object-loop-access uyarısı üretilir.

var(...) içindeki değişken adının bir parçası da placeholder ile üretilebilir:

--themes: { light: light; dark: dark; };
--colors-light: { bg: #f8f9fa; };
--colors-dark: { bg: #0f1117; };

@for(t, var(--themes)) {
  .theme-${t} {
    --c-bg: var(--colors-${t}.bg);
  }
}

Bu örnekte var(--colors-${t}.bg) her iterasyonda var(--colors-light.bg) ve var(--colors-dark.bg) olarak çözülür. Aynı placeholder-li değişken adı üretimi @fun içinde de kullanılabilir.

@for, object variable body içinde de key üretmek için kullanılabilir:

--factor: 2;
--range: [1-4];

--spacing: {
  @for(i, var(--range)) {
    ${i}: ${i * var(--factor)}px;
  }
};

Bu destek yalnız @for(...) { key:value; } formu içindir; object body içinde @if ve @fun desteklenmez.

---

Index Değişkeni

(öğe, ind) formuyla döngü index'ine erişilebilir. Index 0'dan başlar.

--colors: [red, blue, green];

@for((color, ind), var(--colors)) {
  .color-${ind} {
    background: ${color};
  }
}

Üretilen CSS:

.color-0 { background: red; }
.color-1 { background: blue; }
.color-2 { background: green; }

Index ile nth-child kullanımı:

--items: [card, panel, box];

@for((name, ind), var(--items)) {
  .list:nth-child(${ind + 1}) {
    content: '${name}';
  }
}

Üretilen CSS:

.list:nth-child(1) { content: 'card'; }
.list:nth-child(2) { content: 'panel'; }
.list:nth-child(3) { content: 'box'; }

---

İç İçe Döngü

@for blokları iç içe yazılabilir.

--x: [1-2];
--y: [1-3];

@for(i, var(--x)) {
  @for(j, var(--y)) {
    .m-${i}-${j} {
      padding: ${i * j}px;
    }
  }
}

Üretilen CSS:

.m-1-1 { padding: 1px; }
.m-1-2 { padding: 2px; }
.m-1-3 { padding: 3px; }
.m-2-1 { padding: 2px; }
.m-2-2 { padding: 4px; }
.m-2-3 { padding: 6px; }

Selector içinde string birleştirme alternatifleri:

.m-${i}-${j}     /* .m-1-1 */
.m-${i+'-'+j}    /* .m-1-1 — aynı sonuç */

Aritmetik ve string ifadeleri hakkında ayrıntılar için İfade Motoru sayfasına gidin.

Not

maxNestedLoopProduct, iç içe @for döngülerinin iterasyon çarpımını sınırlar. Varsayılan değer 100000'dir.

Örnek:

• dış döngü 100, iç döngü 200 kez çalışıyorsa çarpım 20000 olur ve derleme devam eder
• dış döngü 400, iç döngü 300 kez çalışıyorsa çarpım 120000 olur ve limit aşılır

Bu sınır final CSS'teki gerçek kural sayısını değil, döngü genişlemesinin büyüklüğünü kontrol eder. Final çıktıdaki toplam kural sayısı ayrıca maxExpandedRules limitiyle kontrol edilir.

---

Top-Level Değişken Üretimi

@for bloğu içinde top-level değişken tanımları oluşturulabilir. Üretilen değişkenler normal --isim: değer; gibi davranır.

@for(i, [100, 200, 300]) {
  --duration-${i}: ${i}ms;
}

Üretilen değişkenler:

--duration-100: 100ms;
--duration-200: 200ms;
--duration-300: 300ms;

Bu değişkenler daha sonra normal şekilde kullanılabilir:

@for(i, [100, 200, 300]) {
  --duration-${i}: ${i}ms;
}

.fade-100 { transition: opacity var(--duration-100) ease; }
.fade-200 { transition: opacity var(--duration-200) ease; }

Üretilen CSS:

:root {
  --duration-100: 100ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
}

.fade-100 { transition: opacity var(--duration-100) ease; }
.fade-200 { transition: opacity var(--duration-200) ease; }

Not

Selector bloğu içindeki --x: ...; tanımları bu özelliğe dahil değildir. Onlar normal CSS custom property olarak kalır.

---

Birim Taşıyan Array ile Çarpan

Array öğeleri birim taşıyorsa unitless bir çarpanla çarpılabilir.

--scale: [1px-3px];
--factor: 4;

@for(i, var(--scale)) {
  .space-${i} {
    margin-top: ${i} * var(--factor);
  }
}

Üretilen CSS:

.space-1px { margin-top: 4px; }
.space-2px { margin-top: 8px; }
.space-3px { margin-top: 12px; }

---

@if ile Birlikte Kullanım

@for bloğu içinde @if kullanılabilir. Her iterasyonda koşul ayrı ayrı 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; }

Not

@if ve koşul operatörleri hakkında ayrıntılar için @if / elseif / else sayfasına gidin.