Sass-Scss İf Else Kullanımı

Sezai AlkanFrontend Developer

Sass-Scss #scss #sass #css #if-else

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;
}