Yerel Değişkenler

@fun gövdesi içinde yerel değişken tanımlanabilir.

Kurallar

Yerel değişkenler yalnızca tanımlandıkları fonksiyon gövdesi içinde geçerlidir
Fonksiyon dışından erişilemez
Global değişken olarak kaydedilmez; :root'a yazılmaz
$isim tanımlama söz dizimidir; ${isim} erişim söz dizimidir — ikisi birbirinin yerine kullanılamaz
Aynı fonksiyon içinde aynı isimde iki yerel değişken tanımlanırsa ikincisi birincinin üzerine yazar

Söz Dizimi

Yerel değişkenler $isim söz dizimiyle tanımlanır, ${isim} ile kullanılır.

Tür	Tanımlama	Erişim
Scalar	`$x: 12px;`	`${x}`
Array	`$arr: [1, 2, 3];`	`${arr[0]}`
Object	`$obj: { key: value; };`	`${obj.key}`

Scalar Yerel Değişken

Tek bir değer saklar. Sabit veya parametreden türetilen bir ifade olabilir.

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

Array Yerel Değişken

Değer dizisi saklar. Index ile erişilir.

@fun: make-palette(base) {
  $stops: [10, 20, 40];

  @for(s, ${stops}) {
    .bg-${s} {
      opacity: ${s / 100};
      background: ${base};
    }
  }
}

@fun.make-palette(#2060ff);

Üretilen CSS:

.bg-10 { opacity: 0.1; background: #2060ff; }
.bg-20 { opacity: 0.2; background: #2060ff; }
.bg-40 { opacity: 0.4; background: #2060ff; }

Belirli bir index'e doğrudan erişim:

@fun: first-and-last(a, b, c) {
  $vals: [${a}, ${b}, ${c}];

  .first { color: ${vals[0]}; }
  .last  { color: ${vals[2]}; }
}

@fun.first-and-last(red, green, blue);

Üretilen CSS:

.first { color: red; }
.last  { color: blue; }

Object Yerel Değişken

Anahtar-değer çiftlerini saklar. .key söz dizimiyle erişilir.

@fun: make-button(variant) {
  $styles: {
    bg: #2060ff;
    fg: #ffffff;
    radius: 6px;
  };

  .btn-${variant} {
    background: ${styles.bg};
    color: ${styles.fg};
    border-radius: ${styles.radius};
  }
}

@fun.make-button(primary);

Üretilen CSS:

.btn-primary {
  background: #2060ff;
  color: #ffffff;
  border-radius: 6px;
}