SCSS Koşullu İfadeler (if-else Statements) Kullanımı

Bugün programlama dillerinden aşina olduğumuz if-else yapılarının SCSS’de nasıl kullanıldığına bakacağız. SCSS’deki if-else kullanımı ile artık Css kodlarımızı yazarken koşullu ifadelerden faydalanabiliyoruz.

Kullanımı oldukça basit.

Birkaç örnek yaptığımızda daha iyi anlaşılacaktır.

İlk örneğimizde bir div etiketi oluşturalım.

Sonra bir mixin yazıp verilen ilk parametre değerini div’in genişlik ve yükseklik değeri olarak atayalım.

Div’e bir arkaplan rengi verelim.

Mixin’e verilen ikinci parametre true ise if bloğundaki kodlar çalışacak ve div’e border-radius özelliği uygulanacak.

Mixin’e verilen ikinci parametre false ise if bloğundaki kodlar çalışmayacak ve div’e border-radius özelliği uygulanmayacak.

Kodlarımızı yazmaya başlayalım.

Html Kodları

Scss Kodları

Burada mixin’e birinci parametre olarak 100px verdim. Yani div’in genişlik ve yükseklik değeri 100px olacak.

İkinci parametre olarakta false değeri verdim. Yani if bloğundaki kodlar çalışmayacaktır. 

Css Çıktısı

Tarayıcıdaki Görünümü

scss-if-else-kullanimi-1

Şimdi aynı örneğimizde mixin’e ikinci parametre olarak true değeri verelim.

Html Kodları

Scss Kodları

Css Çıktısı

Tarayıcıdaki Görünümü

scss-if-else-kullanimi-2

Scss’de if kullanımı bu şekilde.

Kodlarımızı yazmaya başlayalım.

Html Kodları

Id’leri birbirinden farklı 4 div oluşturdum.

Scss Kodları

Burada ise;

 ⇒  triangle adında bir mixin yani fonksiyon oluşturdum.

 ⇒  Bu fonksiyon 3 farklı parametre alıyor. Bunlar:

  • Üçgenin boyutu
  • Üçgenin rengi
  • Üçgenin yönü

 ⇒  Daha sonra parametre olarak vermiş olduğumuz üçgenin yönüne göre if-else yapısını kullanarak üçgeni oluşturuyoruz.

 ⇒  Son olarak @include ile triangle fonksiyonu gerekli parametreleri vererek çağırıyoruz.

Css Çıktısı

Gördüğünüz gibi triangle fonksiyonuna vermiş olduğumuz parametrelere göre Css kodları doğru bir şekilde oluştu.

Yazmış olduğumuz kodların tarayıcıdaki görüntüsü şu şekildedir:

scss-if-else-kullanimi-3

Scss’de if-else kullanımı bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

500+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.