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.

Normal programlama dillerindeki kullanımından tek farkı başına “@” işaretinin yazılması.

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.

Başka bir örnek üzerinde de if-else kullanımına bakalım. İf-else kullanımı için en güzel örneklerden bir tanesi üçgen yapımıdır.

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

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link