Sass-Scss İf Else Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Sass ta if else kullanımı Programlama dillerindeki gibi birebir aynıdır. Belirli bir koşulun sağlanıp sağlanmadığını kontrol edebilmekteyiz.

İf kullanımı sağlarken @ işareti ile belirtiyoruz @if(Koşul) şeklide kullanımı mevcuttur. Aşağıdaki örnekte bir @mixin içerisinde gönderdiğimiz parametreye göre bize kenarlık yönü ve rengini döndürecektir.

@mixin cerceve($konum, $renk)
    @if($konum == "top")
        border-top : 1px solid $renk
    @else if($konum == "left") 
        border-left : 1px solid $renk

@include cerceve("top", blue) şeklinde stil bloğumuzun içerisinde @mixin inizimi çağırabiliriz. Gönderdiğimiz $konum parametresine göre @mixin içerisinden if bloğumuzdaki sırasıyla koşulları deneyecektir. Koşul sağlandığında içerisinde oluşturduğumuz kodu bize geri döndürecektir.  

@mixin cerceve($konum, $renk)
    @if($konum == "top")
        border-top : 1px solid $renk
    @else if($konum == "left") 
        border-left : 1px solid $renk
    @else if($konum == "right") 
        border-right : 1px solid $renk
    @else if($konum == "bottom")    
        border-bottom : 1px solid $renk
     
.stil
    @include cerceve("bottom",red) 

Css Ekran Çıktısı:

.stil {
  border-bottom: 1px solid red;
}

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol