Articles
SASS/SCSS'ye Giriş
SASS'taki `if` fonksiyonu

SASS'taki `if` fonksiyonu

Bu makale SASS'taki if fonksiyonunu açıklar.

Adım adım, if fonksiyonunun temellerinden ileri tekniklere kadar her şeyi ele alacağız.

YouTube Video

SASS'taki if fonksiyonu

if() fonksiyonu, SASS tarafından sağlanan, bir boolean koşula göre iki değerden birini döndüren basit bir koşullu fonksiyondur. JavaScript'in üçlü (ternary) operatörüne benzer.

Sözdizimi

Sözdizimi aşağıdaki gibidir:.

1// if(condition, trueValue, falseValue)
  • condition doğruysa trueValue döner; yanlışsa falseValue döner.

Temel Kullanım

Örneğin, tema koyu mu açık mı olduğuna bağlı olarak arka plan ve metin renklerini değiştirmek için if() fonksiyonunu kullanabilirsiniz.

Örnek Kod 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • $theme değişkeni "dark" ise arka plan siyah, metin beyaz olur; "light" ise arka plan beyaz, metin siyah olur.

Oluşturulan CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • $theme değişkeni "dark" olduğundan arka plan siyah, metin beyazdır.

@if deyimi ile if() fonksiyonu arasındaki farklar

Sass, koşullu dallanma için bir @if deyimi ve bir if() fonksiyonu sağlar, ancak bunlar farklı amaçlar için kullanılır.

Örnek Kod 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • @if deyimi, Sass derleme zamanında hangi kodun çıktıya yazılacağını kontrol eder.
  • Buna karşılık, if() fonksiyonu bir değer döndürür ve ifadeler içinde değerleri dinamik olarak değiştirmek için kullanılır.

Oluşturulan CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Bu örnekte, $theme "dark" olduğundan, siyah arka plan ve beyaz metin rengi uygulanır.
  • İki temel fark şunlardır: @if deyimi yapıyı kontrol eder ve if() fonksiyonu bir değer döndürür.

İç içe if fonksiyonları kullanma

Karmaşık dallanmalara ihtiyaç duyduğunuzda if fonksiyonlarını iç içe kullanabilirsiniz.

Örnek Kod 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • $theme "dark" ise siyah döner; "light" ise beyaz döner; aksi halde varsayılan değeri ($custom-color) döner.

Oluşturulan CSS 

1body {
2  background-color: blue;
3}
  • $theme değişkeni custom olduğundan arka plan rengi mavi.

Pratik kullanım örnekleri

Tema değiştirme

Aşağıda, temaya göre buton stillerini değiştiren bir örnek yer alıyor.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Bu kod, $theme değişkeninin değerine göre bir butonun arka plan, metin ve kenarlık renklerini değiştiren bir SASS koşul örneğidir. if() fonksiyonu, koyu ve açık temalar için stilleri dinamik olarak ayarlamak amacıyla kullanılır.

Oluşturulan CSS 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Temayı değiştirerek genel tasarımı tutarlı bir şekilde değiştirebilirsiniz.

İleri örnek: Renk kontrastını dinamik olarak ayarlama

Arka plan rengine bağlı olarak metin rengini otomatik ayarlayan bir örneğe bakalım.

Örnek Kod 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • color.channel() fonksiyonu, arka plan renginin açıklığını (lightness) elde etmek için kullanılır. Bu değer 50%'den büyükse siyah; küçükse metin rengi olarak beyaz seçilir ve arka planla kontrast otomatik olarak optimize edilir.

Oluşturulan CSS 

1body {
2  background-color: #000;
3  color: white;
4}
  • if() fonksiyonunu kullanarak, kontrast ayarlama gibi tasarım erişilebilirliğini dikkate alan esnek stiller uygulayabilirsiniz.

@function ile birleştirme

@function içinde if fonksiyonunun kullanılması daha esnek bir stil tasarımına olanak tanır.

Örnek Kod 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Bu kod, tema ve renk türüne göre uygun renkleri döndürmek için bir @function içinde if() kullanımını gösterir. Bu, her tema için tutarlı ve yeniden kullanılabilir bir stil tasarımını mümkün kılar.

Oluşturulan CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • if() fonksiyonundan yararlanan yardımcı fonksiyonlar oluşturarak ve kullanarak, tüm projenin bakım kolaylığını artırabilirsiniz.

Notlar

  1. if fonksiyonu dinamik değerlerle kullanılamaz CSS başlı başına statik bir dil olduğundan, if fonksiyonu değerleri SASS derlenirken belirler. Çalışma zamanı koşullu mantığı için JavaScript kullanmanız gerekir.

  2. Okunabilirliğe öncelik verin İç içe if işlevleri karmaşık hale gelebilir ve okunabilirliği olumsuz etkileyebilir, bu nedenle kodunuzu düzenlemek için gerektiğinde SASS @mixin ve @function kullanabilirsiniz.

Sonuç

SASS'taki if fonksiyonu, koşullara bağlı olarak farklı değerler döndüren güçlü bir araçtır. Yalnızca basit koşullar için değil, tema değiştirme ve dinamik stil ayarları gibi birçok senaryoda da kullanışlıdır. Ancak karmaşık koşullarla çalışırken okunabilirliğe dikkat edin ve bakım kolaylığını artırmak için @mixin ve @function kullanın.

if fonksiyonuna hâkim olarak daha verimli ve esnek bir stil tasarımına ulaşabilirsiniz.

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'ta koşullu ifadelerSASS'ta Yineleme