SASS'ta Listeler

Bu makale SASS'taki listeleri açıklar.

SASS listelerinin temel ve ileri düzey kullanımlarını ele alacak ve pratik örnekler sunacağız.

YouTube Video

SASS'ta Listeler

SASS, CSS'e uzantı olarak yararlı programlama benzeri özellikler sunar. Bunlar arasında, stilleri dinamik olarak tanımlarken listeler oldukça yararlı bir özelliktir.

SASS Listesi Nedir?

SASS listesi, virgül (,) veya boşluk ile ayrılmış değerler topluluğudur. Birden fazla değeri CSS özelliklerine iletirken veya yinelemeler yaparken kullanılırlar.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Listelerin temel özellikleri şunlardır:.

• Bir liste, sayılar, metinler veya renkler gibi her türlü veri tipini içerebilir.
• Kullanım durumuna göre virgül veya boşluk ile ayrılan listelerden birini seçebilirsiniz.

Listeleri Kullanarak Stil Tanımı için Temel Örnek

Aşağıda, listeler kullanılarak basit kenarlık stillerinin dinamik olarak oluşturulmasına bir örnek bulunmaktadır.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Derleme Çıktısı

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}

• sass:list modülünün nth() fonksiyonu ile bir listeden belirli bir değeri alabilirsiniz.

Liste Manipülasyonu

sass:list modülü, listeler üzerinde işlem yapmak için işlevler sağlar ve eleman eklemeyi ve almayı kolaylaştırır.`.

Bir Eleman Çağırmak: nth()

nth() bir listeden bir elemanı alan fonksiyondur.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• Bu kodda, belirtilen dizindeki değeri almak için nth() fonksiyonu kullanılır.

İndeksi Kontrol Et: index()

index(), bir listedeki bir elemanın konumunu döndüren bir işlemdir.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• Bu kodda, index() fonksiyonu blue öğesinin listede üçüncü sırada olduğunu elde etmek için kullanılır.

Liste Uzunluğunu Almak: length()

length() bir listenin uzunluğunu döndüren fonksiyondur.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• Bu kodda, listedeki değer sayısını elde etmek için length() fonksiyonu kullanılır.

Bir Eleman Eklemek: append()

append() listeye eleman eklemek için kullanılan bir fonksiyondur.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• Bu kodda, listeye değer eklemek için append() fonksiyonu kullanılır.

Bir Elemanı Değiştir: set-nth()

set-nth(), belirtilen konumdaki bir öğeyi başka bir değerle değiştiren bir işlemdir.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• Bu kodda, set-nth() fonksiyonu ikinci elemanı yellow ile değiştirmek için kullanılır.

Listeleri Birleştir: join()

join(), iki listeyi birleştiren bir işlemdir.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• Bu kodda, join() fonksiyonu iki listeyi birleştirerek tek bir liste haline getirir.

Listeleri Eşleştir: zip()

zip(), birkaç listeyi eleman bazında gruplayan bir işlemdir.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• Bu kodda, zip() isimleri ve yaşları ikili olarak eşleştirmek için kullanılır.

İç İçe Listeler

Listeler ayrıca iç içe kullanılabilir ve böylece iki boyutlu diziler gibi kullanılabilirler.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

• Bu tür karmaşık veri yapılarını yöneterek, gelişmiş stil oluşturmak mümkün olur.

Pratik Örnek: Gradyan Oluşturma

Aşağıda listeler kullanılarak gradyanların verimli şekilde oluşturulmasına bir örnek verilmiştir.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Derleme Çıktısı

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• Bu kod, SCSS'te listeler kullanılarak gradyanların otomatik olarak üretilmesine bir örnektir.

  • Gradyanda kullanılan renkler $colors listesinde tanımlanmıştır.
  • gradient() fonksiyonunda, renklerin sayısına göre her renge eşit şekilde bir konum atanır ve gradyan için bir liste oluşturulur.
  • .background sınıfında, oluşturulan renk listesi birleştirilerek linear-gradient ile yatay bir gradyan uygulanır.

• Pozisyonlar, renk listesi uzunluğuna göre otomatik olarak hesaplandığı için, renk ekleyip değiştirerek kolayca düzgün bir gradyan oluşturabilirsiniz.

Dikkat Edilmesi Gerekenler ve En İyi Uygulamalar

Listeleri kullanırken şu noktalara dikkat edilebilir:.

• Liste Ayırıcı Tipi Virgül ile ayrılan ve boşluk ile ayrılan listeler farklı şekilde işlenir, bu nedenle duruma uygun biçimde seçmeniz gerekir.

• Liste Boyutu Listelerle dinamik olarak çalışırken, boyutu length() fonksiyonu ile kontrol etmek güvenli olur.

• İç İçe Listeleri Yönetmek İç içe listelerle çalışırken, dikkatli indeks işlemleri hatalardan kaçınmaya yardımcı olabilir.

Sonuç

SASS listeleri, stilleri dinamik olarak tanımlamak ve karmaşık tasarımları verimli bir şekilde yönetmek için güçlü bir araçtır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video