Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

Sass-Scss İf Else Kullanımı

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

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com