SASS ve SCSS'te if else Kullanımı

Merhaba. Bu yazımda SASS ve SCSS'te kullanılan Flow Control yani akış kontrol yapılarından biri olan if ve if-else yapısından bahsedeceğim. 

Programlama dillerinde olduğu gibi SASS ve SCSS'te de if-else yapısı mantıksal ve matematiksel kıyaslamalar yapmak için kullanılır. If-else yapısı ile aşağıdaki operatörleri kullanabilmekteyiz. 

== Eşittir
!= Eşit Değildir / Farklıdır
>  Büyüktür
>= Büyük veya Eşittir
<  Küçüktür 
<= Küçük veya Eşittir 

SASS ile yapacağımız bir örnek ile if-else kullanımına göz atalım. 

@mixin icon($boyut, $yuvarlak) 
    width: $boyut 
    height: $boyut 

    @if ($yuvarlak)
        border-radius: $boyut/2

.profilBilgi 
    float: left 
    @include icon(40px, true) 

Bu örnekte icon adında bir mixin oluşturup iki tane parametre gönderdim. Parametrelerden biri genişlik ve yüksekliği belirleyecek olan $boyut parametresi, diğeri ise oluşturulan bu alanın kare mi yoksa dikdörten mi olacağını belirleyen ve true/false şeklinde bir değer alan $yuvarlak adlı parametre. Bu işleme göre eğer icon mixin'i çağırılırken $yuvarlak parametresi true olarak gönderilirse yuvarlak bir alan oluşturulacak yani border-radius eklenecek, false olarak gönderilirse kare bir alan oluşacaktır. 

Yukarıdaki aynı örneği SCSS ile yapalım. 

@mixin icon($boyut, $yuvarlak) {
    width: $boyut;
    height: $boyut; 

    @if ($yuvarlak)
        border-radius: $boyut/2;
}

.profilBilgi { 
    float: left ;
    @include icon(40px, true) ;
}

Bu iki bloğun çıktısı aşağıdaki gibi olacaktır. 

.profilBilgi {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

Eğer $yuvarlak parametresini false olarak gönderseydim, .profilBilgi bloğu içerisinde border-radius ifade oluşmayacak ve alanımız kare olacaktı.

2. Örnek: Bu örnekte ise bir mixin yapısı oluşturup, parametre ile gönderdiğim takım ismine göre arkaplan ve yazı renkleri oluşturmak istiyorum. Buradaki kontroller için yine if-else yapısını kullanacağım. 

@mixin stil($takim)
    @if ( $takim == "ss" )
        background: red
        color: #fff 
    @else if( $takim == "bs" )
        background: green 
        color: #fff 
    @else if ( $takim == "as" )
        background: orange
        color: green

.kutu 
    float: left 
    @include stil("ss")

Bu örnekte, stil adlı mixin'e gönderdiğim takim adlı parametreyi if-else bloğuyla kontrol edip, bu değerlere göre arkaplan ve yazı renkleri oluşturuyorum. Aynı örneği şimdi de SCSS içerisinde yapalım.

@mixin stil($takim){
    @if ( $takim == "ss" ) {
        background: red;
        color: #fff ;
    } @else if( $takim == "bs" ) {
        background: green ;
        color: #fff ;
    } @else if ( $takim == "as" ) {
        background: orange;
        color: green;
    }
}
.kutu {
    float: left;
    @include stil("ss")
}

Bu iki örneğin de çıktısı aşağıdaki gibi olacaktır.

.kutu {
  float: left;
  background: red;
  color: #fff;
}

Eğer parametreyi ss değil de bs olarak gönderirsem aşağıdaki gibi bir çıktı elde edeceğim.

.kutu {
  float: left;
  background: green;
  color: #fff;
}

Görüldüğü gibi gönderdiğim takım isimlerine göre if-else yapısını kullanarak dinamik olarak arkaplan ve yazı rengi özelliklerini vermiş olduk.

Bu içeriğe ait video derse aşağıdan ulaşabilirsiniz.

Soru ve görüşlerinizi yorum olarak yazabilirsiniz. Hayırlı çalışmalar dilerim.