@fun

@fun, tekrar kullanılabilir CSS blokları tanımlamanızı sağlar. Tanımlanan fonksiyon parametrelerle çağrılır ve derleme sırasında açılır.

---

Tanımlama

@fun: fonksiyon-adı(param1, param2) {
  /* gövde */
}

İpucu

Fonksiyonlar @fun:fonksiyon-adi(...){...} söz dizimi ile tanımlanır, @fun.fonksiyon-adi(...) şeklinde çağrılır.

Kurallar:

• Fonksiyon adında - kullanılabilir
• Gövde içinde @for, @if, elseif, else kullanılabilir
• Parametre sayısı eksik veya fazlaysa fonksiyon açılmaz, function-argument-mismatch uyarısı üretilir

Parametre uyuşmazlığı örneği:

@fun: make-chip(name, bg, fg) {
  .chip-${name} {
    background: ${bg};
    color: ${fg};
  }
}

/* ✓ Doğru — 3 parametre */
@fun.make-chip(primary, #dbe9ff, #1c3f8f);

/* ✗ Eksik parametre — açılmaz, function-argument-mismatch uyarısı üretilir */
@fun.make-chip(primary, #dbe9ff);

/* ✗ Fazla parametre — açılmaz, function-argument-mismatch uyarısı üretilir */
@fun.make-chip(primary, #dbe9ff, #1c3f8f, 8px);

Uyuşmazlık durumunda ilgili @fun.make-chip(...) çağrısı CSS çıktısına yansımaz; diğer doğru çağrılar etkilenmez.

---

Blok Üretimi

Fonksiyon gövdesi selector blokları veya property'ler üretir. Bağımsız bir statement olarak çağrılır.

@fun: make-chip(name, bg, fg) {
  .chip-${name} {
    background: ${bg};
    color: ${fg};
    padding: 4px 12px;
    border-radius: 12px;
  }
}

@fun.make-chip(success, #d1fae5, #065f46);
@fun.make-chip(danger,  #fee2e2, #991b1b);

Üretilen CSS:

.chip-success {
  background: #d1fae5;
  color: #065f46;
  padding: 4px 12px;
  border-radius: 12px;
}

.chip-danger {
  background: #fee2e2;
  color: #991b1b;
  padding: 4px 12px;
  border-radius: 12px;
}

---

Satır İçi Değer Dönüşü

Fonksiyon gövdesi bir değer ifadesi üretir. Bir property'nin değeri olarak çağrılır.

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

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

Üretilen CSS:

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

---

Property Inline Return

Fonksiyon gövdesi property: değer biçiminde yazılır. Statement olarak çağrılır; tüm property bloğu olarak açılır.

@fun: font-size-s(i) {
  font-size: 12px * ${i};
}

.title-s {
  color: #000;
  @fun.font-size-s(2);
}

Üretilen CSS:

.title-s {
  color: #000;
  font-size: 24px;
}

Birden fazla property: değer yazılabilir:

@fun: sizes(i) {
  font-size: 12px * ${i};
  margin: ${i * 4px};
}

.title-s {
  color: #000;
  @fun.sizes(2);
}

Üretilen CSS:

.title-s {
  color: #000;
  font-size: 24px;
  margin: 8px;
}

---

var(...) ile Parametre Geçirme

Fonksiyon parametrelerine var(...) ile değişken değeri geçirilebilir.

--primary: #dbe9ff;
--secondary: #1c3f8f;
--call: 5;

@fun: make-chip(name, bg, fg, call) {
  .chip-${name} {
    background: ${bg};
    color: ${fg};
    margin: ${call * 2}px;
  }
}

@fun.make-chip(primary, var(--primary), var(--secondary), var(--call));

Üretilen CSS:

:root {
  --primary: #dbe9ff;
  --secondary: #1c3f8f;
  --call: 5;
}

.chip-primary {
  background: var(--primary);
  color: var(--secondary);
  margin: 10px;
}

Not

${bg} gibi tek tanımlayıcı kullanımları ham var(...) metnini korur. ${call * 2} gibi composite ifadelerde compile-time var(...) değerleri çözümlenir.

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

--colors-light: { bg: #f8f9fa; text: #212529; };
--colors-dark: { bg: #0f1117; text: #e9ecef; };

@fun: theme-bg(t) {
  background-color: var(--colors-${t}.bg);
  color: var(--colors-${t}.text);
}

.card-light { @fun.theme-bg(light); }
.card-dark { @fun.theme-bg(dark); }

Üretilen CSS:

.card-light {
  background-color: #f8f9fa;
  color: #212529;
}

.card-dark {
  background-color: #0f1117;
  color: #e9ecef;
}

---

@for ile Kombinasyon

@for döngüsü içinden fonksiyon çağrılabilir. Her iterasyon için fonksiyon bağımsız açılır.

@fun: make-density(mode) {
  @if(${mode} === 'compact') {
    .density-${mode} { padding: 2px 6px; }
  }
  else {
    .density-${mode} { padding: 6px 10px; }
  }
}

@for(mode, [compact, relaxed]) {
  @fun.make-density(${mode});
}

Üretilen CSS:

.density-compact { padding: 2px 6px; }
.density-relaxed { padding: 6px 10px; }

---

Nesting ve At-Rule Üretimi

Fonksiyon gövdesi nested selector ve at-rule da içerebilir:

@fun: card-layout(bp, pad) {
  @media (min-width: ${bp}) {
    .card {
      padding: ${pad};

      .title {
        font-size: 18px;
      }
    }
  }
}

@fun.card-layout(768px, 24px);

Üretilen CSS:

@media (min-width: 768px) {
  .card {
    padding: 24px;
  }

  .card .title {
    font-size: 18px;
  }
}

Bu yapı, aynı nested-at-rule kalıbını farklı breakpoint veya değerlerle tekrar kullanmak için uygundur.

---

Yerel Değişkenler

@fun gövdesi içinde $isim söz dizimiyle yerel değişken tanımlanabilir. Yerel değişkenlere ${isim} ile erişilir.

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

Not

Scalar, array ve object yerel değişkenler ile kapsam kuralları için Yerel Değişkenler sayfasına gidin.

---

Warning Kodları

Durum	Warning
Tanımlanmamış fonksiyon çağrısı	unknown-function-call
Parametre sayısı uyuşmazlığı	function-argument-mismatch
Aynı isimde iki fonksiyon tanımı	duplicate-function
Geçersiz fonksiyon söz dizimi	invalid-function-syntax
Geçersiz fonksiyon adı	invalid-function-name
Özyineleme (recursion)	function-recursion