İfadeler ve Hesaplamalar

${...} ifadesi, .luis içinde derleme zamanında değer üretmek için kullanılır. @fun, @for ve @if içinde çalışır; ayrıca selector ve declaration değerlerinde de doğrudan kullanılabilir.

Bu sayfa artık eski İfade Motoru içeriğini de kapsar.

---

Desteklenen İfade Türleri

Tür	Örnek
Aritmetik	${i + j}, ${i * 4}, ${i / 2}
String birleştirme	${'btn' + '-' + size}
Compile-time normal var	${var(--prefix) + '-' + name}
Compile-time object key var	${var(--theme.prefix) + '-' + name}
Compile-time array index var	${var(--sizes[0])}, ${var(--sizes[ind])}
Compile-time array item key	${var(--breakpoints[0].name)}, ${var(--breakpoints[ind].name)}
Compile-time object bracket	${var(--colors[key])}
Yerel array index erişimi	${arr[0]}
Yerel array index + key	${arr[0].name}
Yerel object key erişimi	${obj.key}, ${obj.name}
Parantezli ifade	${(i + j) * 2}

---

Genel Notlar

• ${...} yalnızca @for veya @fun içinde değil; selector ve declaration değerlerinde de kullanılabilir
• İfade bir string veya hesap sonucu üretiyorsa derleme zamanında çıktıya yazılır
• String literal ile birleştirme yaparken literal kısım tırnak içinde yazılmalıdır: 'btn', "sm"
• Tırnaksız color, prefix, btn gibi token'lar string literal değil, identifier olarak yorumlanır

---

Genel Kullanım

@for veya @fun dışında da kullanılabilir

--prefix: btn;
--factor: 4;

.${var(--prefix) + '-size'} {
  font-size: ${var(--factor) * 4}px;
}

Üretilen CSS:

.btn-size   { font-size: 16px;  }

Temel Aritmetik

Dört işlem operatörleri desteklenir: +, -, *, /

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

Üretilen CSS:

.p-1   { padding: 4px;  }
.p-2   { padding: 8px;  }
.p-3   { padding: 12px; }
.p-4   { padding: 16px; }
.gap-1 { gap: 8px;  }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.gap-4 { gap: 32px; }

Standart operatör önceliği geçerlidir: * ve / önce, + ve - sonra. Belirsiz durumlarda parantez kullanın:

@for(i, [1-3]) {
  .item-${(i + 1) * 2} { z-index: ${(i + 1) * 2}; }
}

Üretilen CSS:

.item-4 { z-index: 4; }
.item-6 { z-index: 6; }
.item-8 { z-index: 8; }

---

- Operatörünün Özel Kuralı

- operatörü bağlama göre farklı davranır:

Yazım	Davranış
${a - b}	Tüm operandlar sayıysa matematiksel çıkarma
${prefix-name}	En az biri string ise - ile birleştirme
${prefix + '-' + name}	Her zaman string birleştirme — açık form, önerilir

Belirsiz durumlarda açık form kullanın:

/* Belirsiz — prefix string mi sayı mı? */
.${prefix-size} { }

/* Açık ve her zaman doğru */
.${prefix + '-' + size} { }

---

+ Operatörünün Özel Kuralı

+ operatörü bağlama göre farklı davranır:

Yazım	Davranış
${a + b}	Tüm operandlar sayıysa matematiksel toplama
${prefix+name}	En az biri string ise birleştirme

--prefix: btn;
--factor: 4;
--count: 6;

.${var(--prefix) + '-size'} {
  font-size: ${var(--factor) * 4}px;
}

.${var(--prefix) + var(--factor)} {
  font-size: ${var(--factor) * 4}px;
}

.size-${var(--count) + var(--factor)} {
  font-size: ${var(--factor) * 4}px;
}

çıktısı:

.btn-size {
  font-size: 16px;
}

.btn4 {
  font-size: 16px;
}

.size-10 {
  font-size: 16px;
}

---

Birim Taşıyan Çarpma

Birimli bir değer, unitless bir sayıyla çarpılabilir. Birim çıktıya taşınır.

@fun: size(i) {
  ${i * 4};
}

.btn {
  padding: @fun.size(3px);
  margin:  @fun.size(2px);
}

Üretilen CSS:

.btn {
  padding: 12px;
  margin: 8px;
}

Array değişkeniyle:

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

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

Üretilen CSS:

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

Declaration değerinde iki var() doğrudan çarpılabilir — ${...} gerekmez:

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

.space {
  margin-top: var(--factor) * var(--scale[0]);
}

Üretilen CSS:

.space {
  margin-top: 4px;
}

@for içinde ${...} ile var() çarpımı:

--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; }

---

String Birleştirme

String değerleri + operatörüyle birleştirilir. String literal'lar tırnak içinde yazılmalıdır.

--prefix: btn;

@for(size, [sm, md, lg]) {
  .${var(--prefix) + '-' + size} {
    font-size: 14px;
  }
}

Üretilen CSS:

.btn-sm { font-size: 14px; }
.btn-md { font-size: 14px; }
.btn-lg { font-size: 14px; }

@fun içinde:

@fun: make-class(prefix, name) {
  .${prefix + '__' + name} {
    display: block;
  }
}

@fun.make-class(card, body);
@fun.make-class(card, footer);

Üretilen CSS:

.card__body   { display: block; }
.card__footer { display: block; }

---

Compile-Time var() Erişim Formları

${...} içinde aşağıdaki var() formları desteklenir:

${var(--prefix) + '-' + size}          /* CSS değişken */
${var(--theme.prefix) + '-' + size}    /* Object key */
${var(--sizes[0])}                     /* Array index */
${var(--sizes[ind])}                   /* Array index (döngü değişkeni) */
${var(--breakpoints[0].name)}          /* Array öğe key */
${var(--breakpoints[ind].name)}        /* Array öğe key (döngü değişkeni) */
${var(--colors[key])}                  /* Object bracket — yalnızca object değişken */

Dikkat

${var(--obj[${key}])} iç içe ${...} formu desteklenmez. Bunun yerine var(--obj[${key}]) kullanın — dış ${...} olmadan, var(...) içinde.

Selector ve Declaration Value'da Kullanım

--color: A;

.${'color' + var(--color)} {
  color: ${'#aa' + var(--color)};
}

.colorA { color: #aaA; }

--colorA: [A-F];

.${"color-" + var(--colorA[0])} {
  color: ${"#aa" + var(--colorA[0])};
}

.color-A { color: #aaA; }

Dynamic Object Key

--colors: { primary: #111111; secondary: #222222; };

@for(key, [primary, secondary]) {
  .text-${key} {
    color: ${var(--colors[key])};
  }
}

.text-primary   { color: #111111; }
.text-secondary { color: #222222; }

---

---

İç İçe Döngüde Hesaplama

İç içe @for döngülerinde birden fazla iterasyon değeri birlikte hesaplanabilir.

--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'daki ${i + '-' + j} string birleştirme, property'deki ${i * j} ise çarpma işlemi yapar.

---

Parantezli İfade ile Hesaplama

Birden fazla işlem içeren ifadelerde parantez önceliği belirler.

--space: [0-3];

@for(i, var(--space)) {
  .p-${i} { padding: ${(i + 2) * 3}px; }
}

Üretilen CSS:

.p-0 { padding: 6px;  }
.p-1 { padding: 9px;  }
.p-2 { padding: 12px; }
.p-3 { padding: 15px; }

i = 0 için (0 + 2) * 3 = 6, i = 1 için (1 + 2) * 3 = 9.

---

Yerel Değişkenle Hesaplama

@fun içinde yerel değişkenler ara hesap sonuçlarını saklamak için kullanılabilir.

@fun: make-spacing(base) {
  $sm: ${base};
  $md: ${base * 2};
  $lg: ${base * 4};

  .space-sm { margin: ${sm}px; }
  .space-md { margin: ${md}px; }
  .space-lg { margin: ${lg}px; }
}

@fun.make-spacing(4);

Üretilen CSS:

.space-sm { margin: 4px;  }
.space-md { margin: 8px;  }
.space-lg { margin: 16px; }