Array Değişkeni

Array değişkeni, değer dizisi tanımlamanızı sağlar. Öğeler scalar değer, nesne veya her ikisinin karışımı olabilir. Aralık söz dizimiyle uzun listeleri kısa yoldan oluşturabilirsiniz.

Tanımlama

--isim: [öğe, öğe, ...]; söz dizimiyle tanımlanır.

--variants: [light, dark, violet];
--steps: [1-12];
--spaces: [4px-24px];
--letters: [A-F];
--breakpoints: [{ name: sm; size: 640px }, { name: md; size: 768px }];

Erişim Biçimleri

Söz Dizimi	Ne Döndürür
`var(--variants)`	Tüm öğe
`var(--variants[0])`	İndex ile erişim. İlk öğe 0'dan başlar
`var(--breakpoints[0].name)`	Nesne öğesinde index ve key erişimi

Aralık Söz Dizimi

Ardışık değerler için [başlangıç-bitiş] kısaltması kullanılabilir.

Sayı Aralığı

--steps: [1-4];

Bu şunun kısaltmasıdır:

--steps: [1, 2, 3, 4];

Birim Aralığı

--spaces: [4px-8px];

Bu şunun kısaltmasıdır:

--spaces: [4px, 5px, 6px, 7px, 8px];

Harf Aralığı

--letters: [A-F];

Bu şunun kısaltmasıdır:

--letters: [A, B, C, D, E, F];

Ters Sıra

Aralıklar ters sırada da yazılabilir:

--countdown: [4-1];    /* [4, 3, 2, 1] */
--lettersRev: [F-C];   /* [F, E, D, C] */

Quoted Range Farkı

Tırnak içindeki değerler aralık olarak genişletilmez, tek string öğe olarak kabul edilir.

Yazım	Sonuç
`[A-F]`	`[A, B, C, D, E, F]` — harf aralığı
`['A-F']`	`['A-F']` — tek string öğe
`["A-F"]`	`["A-F"]` — tek string öğe

--range: [A-F];       /* 6 öğe: A, B, C, D, E, F */
--literal: ['A-F'];   /* 1 öğe: 'A-F' */

Unit-Range Davranışı

Aralıkta başlangıç ve bitiş birimleri farklıysa derleme durmaz, invalid-array-range-unit uyarısı üretilir ve ara değerler varsayılan mantıkla doldurulur.

--mixed: [1px-3rem];

Üretilen ara form:

--mixed: [1px, 2px, 3rem];

İlk öğe kendi birimini korur
Son öğe kendi birimini korur
Ara öğeler başlangıç birimiyle doldurulur

Scalar Dizi

Öğeler string, sayı veya CSS değeri olabilir.

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

@for((size,index), var(--sizes)) {
  .btn-${size} { font-size: ${(index + 1) * 4}px; }
}

Üretilen CSS:

.btn-sm { font-size: 4px; }
.btn-md { font-size: 8px; }
.btn-lg { font-size: 12px; }

Nesne Dizisi

Öğeler nesne olduğunda key erişimi var(--arr[index].key) söz dizimiyle yapılabilir.

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

Karışık Array

Nesne ve scalar öğeler aynı dizide bir arada bulunabilir.

--tones: [{ 100: #f8faff; 900: #0a1628; }, midgray, { 100: #f5f5f5; }];

Nesne öğeleri için var(--tones[0].100) gibi key erişimi kullanılabilir.
Scalar öğeler için var(--tones[1]) gibi doğrudan index erişimi kullanılabilir.

.color-a {
  background: var(--tones[0].100);  /* #f8faff */
}

.color-b {
  color: var(--tones[1]);           /* midgray */
}

Üretilen CSS:

.color-a {
  background: #f8faff;
}

.color-b {
  color: midgray;
}

Selector İçinde Index Erişimi

Array öğesi selector parçası olarak kullanılabilir. Hem nesne dizilerinde key erişimi hem de scalar dizilerde doğrudan index erişimi desteklenir.

Nesne Dizisi — Key Erişimi

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

.bp-&var(--breakpoints[0].name) {
  max-width: var(--breakpoints[0].size);
}

Üretilen CSS:

.bp-sm {
  max-width: 640px;
}

Scalar Dizi — Doğrudan Index Erişimi

Scalar dizilerde öğe değeri doğrudan selector içinde kullanılabilir. Property değerinde ise &var(...) ile aynı öğe önceki metne boşluksuz eklenebilir.

--color-range: [A-F];

.bp-var(--color-range[0]) {
  color: #AA&var(--color-range[0]);
}

var(--color-range[0]) ilk öğeyi yani A değerini verir. Selector'daki var(--color-range[0]) → .bp-A, declaration'daki #AA&var(--color-range[0]) → #AAA.

Üretilen CSS:

.bp-A {
  color: #AAA;
}

Tüm öğeler için @for ile birleştirebilirsiniz:

--color-range: [A-F];

@for(c, var(--color-range)) {
  .bp-${c} {
    color: ${"#AA" + c};
  }
}

Üretilen CSS:

.bp-A { color: #AAA; }
.bp-B { color: #AAB; }
.bp-C { color: #AAC; }
.bp-D { color: #AAD; }
.bp-E { color: #AAE; }
.bp-F { color: #AAF; }