SASS'ta koşullu ifadeler

Bu makale SASS'taki koşullu ifadeleri açıklar.

Pratik örneklerle @if, @else if ve @else yönergeleriyle koşulların temelden ileri kullanımlarına kadar her şeyi açıkça açıklıyoruz.

YouTube Video

SASS'ta koşullu ifadeler

SASS, CSS'i genişleten bir stil sayfası dilidir ve koşulları kullanarak stilleri esnek biçimde kontrol edebilirsiniz. SASS'ta @if, @else if ve @else kullanarak derleme sırasında stillerin çıktısını değiştirebilirsiniz.

Temel koşul söz dizimi

SASS'taki temel koşullar aşağıdaki söz dizimiyle yazılır.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if ilk koşulu değerlendirir; koşul yanlışsa @else if veya @else blokları sırayla değerlendirilir.

Basit koşul örneği

Aşağıdaki örnekte arka plan rengi $theme değişkenine göre değişir.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

Derlenen CSS

1body {
2  background-color: #333;
3  color: #fff;
4}

• $theme "dark" olduğunda koyu arka plan ve beyaz metin rengi uygulanır.

Koşulları hesaplamalarla birleştirme

Koşullar yalnızca dize ve renk karşılaştırmalarını değil, sayısal hesaplamaları da ele alır.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

Derlenen CSS

1.container {
2  max-width: 1200px;
3}

• Sayısal karşılaştırmalar da mümkündür ve $width 1000px'i aştığında max-width: 1200px çıktıda üretilir.

İç içe koşullar

Koşulları iç içe yazarak karmaşık koşulları ifade edebilirsiniz.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

Derlenen CSS

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• Koşulları iç içe kullanmak tema ve boyuta göre stillendirmeyi mümkün kılar.

Özel fonksiyonlarda koşulları kullanma

Özel fonksiyonların içinde koşul kullanmak yeniden kullanılabilirliği artırabilir.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

Derlenen CSS

1.card {
2  background-color: #333;
3}

• Koşulları fonksiyonlar içinde kapsülleyerek yeniden kullanılabilirliği ve bakım kolaylığını artırabilirsiniz.

Pratik bir örnek - Tasarımları değiştirme

Belirli koşullara göre genel tasarımı değiştirme örneğine bakalım.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

Derlenen CSS

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Tema değişkenine göre tüm sayfanın renk şemasını dinamik olarak değiştirebilirsiniz.

Notlar ve en iyi uygulamalar

SASS koşullu ifadelerini kullanırken aşağıdaki noktaları göz önünde bulundurabilirsiniz.

1. Koşulları basit tutun

   Karmaşık iç içe yapılar okunabilirliği bozar; bu nedenle fonksiyonlardan ve mixin'lerden yararlanmak işleri basit tutmaya yardımcı olur.

2. Değişkenler ve fonksiyonlarla soyutlayın

   Benzer koşulları birden fazla yerde kullanıyorsanız bunları değişkenlerde veya fonksiyonlarda toplamak bakımı iyileştirir.

3. Mantığın şişmesini önleyin

   Tasarım kurallarını olabildiğince birleştirin ve koşulları aşırı kullanmaktan kaçının.

Sonuç

SASS'taki koşullar esnek ve dinamik stiller oluşturmada çok etkili bir araçtır. Burada temelden pratik örneklere kadar her şeyi adım adım açıkladık. Koşulları gerçek projelerde kullanırken işleri gereğinden fazla karmaşıklaştırmamaya dikkat ederek, yeniden kullanılabilir kodu göz önünde bulundurarak tasarlayın.

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

YouTube Video