Articles
SASS/SCSS'ye Giriş
SASS'ta Yineleme

SASS'ta Yineleme

Bu makale, SASS'ta yinelemenin nasıl yapılacağını açıklamaktadır.

SASS'ta yinelemeyi, gerçek kod örnekleriyle adım adım nasıl yapacağınızı açıklayacağız.

YouTube Video

SASS'ta Yineleme

SASS'ta yineleme, kod tekrardan kaçınmanıza ve esnek, yeniden kullanılabilir stiller oluşturmanıza yardımcı olur.

SASS'ta yineleme kullanma nedenleri

Yineleme kullanmanın aşağıdakiler gibi çeşitli avantajları vardır:.

  • Yeniden kullanılabilirlik artar, benzer kalıp stillerini kolayca üretebilirsiniz.
  • Bakım kolaylığı artar, tüm stilleri bir kerede değiştirmek daha kolay olur.
  • Hataları azaltır ayrıca.

Örneğin, farklı renklere sahip butonlar veya birden çok boyutta bileşenler için stilleri tek seferde oluşturabilirsiniz.

SASS'ta yineleme için kullanılan sözdizimi

SASS'ta yineleme için kullanılan ana sözdizimi aşağıdaki gibidir:.

  • @for kullanarak belirli bir sayı aralığında yineleme yapabilirsiniz.
  • @each kullanarak listeler veya haritalar üzerinde döngü yapabilirsiniz.
  • @while kullanarak belirli bir koşul karşılanana kadar döngü yapabilirsiniz.

@for ile yineleme

@for belirli bir sayı aralığında tekrarlı işlemler yapar.

Sözdizimi 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • <start> ve <end> için başlangıç ve bitiş değerlerini belirtin. to kullanıldığında bitiş değeri hariç tutulur, through ile ise dahil edilir.

Örnek

Aşağıdaki kod, her seferinde 1px artan kenar kalınlığına sahip sınıfları otomatik olarak üretir.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Bu kod, her birinde kenar kalınlığı 1px artan sınıfları otomatik olarak oluşturur. Burada @for direktifi ile 1'den 5'e kadar döngü yapılır.

Oluşturulan CSS 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • .border-1'den .border-5'e kadar olan sınıflar birer birer oluşur ve her biri 1px daha kalın kenar ile artar.

@each ile yineleme

@each liste veya haritaları kullanarak döngü yapar. Düzenli sınıfları verimli bir şekilde üretmek istediğinizde faydalıdır.

Sözdizimi 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Örnek 1: Liste Kullanımı

Aşağıdaki kod, birden fazla metin rengi sınıfı oluşturur.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Bu kod, listedeki her renk için otomatik olarak metin rengi sınıfları oluşturur. @each direktifi ile listedeki her değer sırayla işlenir.

Oluşturulan CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • SASS dosyası CSS'ye derlendiğinde, listedeki her renk için .text-red, .text-blue, .text-green gibi sınıflar oluşturulur.

Örnek 2: Harita (Map) Kullanımı

Bir harita (map) kullanmak, anahtar-değer çiftleriyle çalışmanıza olanak tanır. Aşağıdaki örnekte, buton arka plan renkleri harita kullanılarak tanımlanmıştır.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

Oluşturulan CSS 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • SASS dosyası CSS'ye derlendiğinde, haritadaki her anahtar için .bg-primary, .bg-success ve .bg-danger gibi sınıflar oluşturulur.

@while ile yineleme

@while koşul doğru olduğu sürece döngüye devam eder.

Sözdizimi 

1/*
2@while <condition> {
3  ...
4}
5*/

Örnek

Örneğin, yazı tipini adım adım büyütmek istiyorsanız, aşağıdaki gibi yazabilirsiniz:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Yazı tipi boyutlarını adım adım artırmak için @while direktifini yinelemeli işlem için kullanabilirsiniz. $i değişkenini kullanarak, 1'den 5'e kadar olan değerler için sınıflar otomatik olarak oluşturulur.

Oluşturulan CSS 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • SASS dosyası CSS'ye derlendiğinde, 1rem'den 5rem'e kadar artan yazı tipi boyutuna sahip sınıflar otomatik olarak oluşturulur.

Gelişmiş Örnek: Yineleme ve İç İçe Geçmeyi Birleştirme

Yinelemeyi SASS'ın iç içe geçme özelliğiyle birleştirerek daha gelişmiş stil üretimi elde edebilirsiniz.

Örnek

Aşağıda, butonlar için arka plan ve üzerine gelindiğindeki renklerin birlikte tanımlandığı bir örnek vardır.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Yineleme ve SASS iç içe yazımını birleştirerek, buton arka plan renklerini ve üzerine gelindiğindeki renkleri bir seferde oluşturabilirsiniz. Haritadaki her bir renk için bir .btn- sınıfı oluşturulur ve :hover stili iç içe yazım kullanılarak tanımlanır.

Oluşturulan CSS 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • SASS dosyasını CSS'ye dönüştürdüğünüzde, her buton için arka plan rengi ve üzerine gelindiğindeki (hover) renk otomatik olarak oluşturulur ve :hover stilleri iç içe geçirme (nesting) kullanılarak topluca tanımlanır.

Yineleme Kullanırken Dikkat Edilmesi Gerekenler

Daha verimli ve okunabilir kod yazmak için yineleme kullanırken aşağıdakilere dikkat edin.

  1. Çok fazla derin iç içe geçmeden kaçının Aşırı iç içe geçme okunabilirliği azaltır, bu yüzden minimumda tutun.

  2. Performans etkilerini göz önünde bulundurun Yineleme ile çok fazla sınıf oluşturulursa, CSS'iniz gereksiz yere büyük hale gelebilir.

  3. Uygun değişken adları kullanın $i veya $item gibi değişkenlerde, daha anlamlı isimler kullanarak kodunuzu daha anlaşılır yapabilirsiniz.

Özet

SASS'ta yinelemeden yararlanmak, verimli ve sürdürülebilir stil tasarımlarına olanak tanır. Özellikle, @for, @each ve @while arasında seçim yaparak dinamik ve esnek CSS üretebilirsiniz.

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

YouTube Video

SASS'taki `if` fonksiyonu