Sass-Scss Mixin Kullanımı

Sezai AlkanFrontend Developer

Sass-Scss #sass #scss #mixin

Sass ve Scss de mixin kullanımı, tekrarlı olarak yazılan kodların bir veya daha fazla blok içerisinde toplayarak ihtiyaç halinde çağırılma işlemine diyebiliriz.

Kullanımı 

@mixin blokAdi
    bloksatirlari

Mixin oluşturuken @mixin balokAdi olarak tanımlama yapıyoruz. blok altına yapacağımız tanımlamaları daha sonra istediğimiz yerde @include blokAdi şeklinde çağırabilmekteyiz.

@mixin kutu
    border: 1px solid #ddd
    border-radius: 5px
    padding: 5px

.stil
    font-size: 3rem
    color: red
    @include kutu 

.davar
    @include kutu  

Css Çıktısı : 

.stil {
  font-size: 3rem;
  color: red;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

.davar {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

Mixin Parametre Gönderme

Oluşturduğumuz Mixinlere parametrede gönderbilmekteyiz. Örnek olarak mixini çağıracağımız stil içerisinde border kalınlığını farklı yapmak isteyebiliriz veya yazı boyutunu büyütmek / küçültmek isteyebiliriz.

@mixin kutu($border)
    border: $border solid #ddd
    border-radius: 5px
    padding: 5px

.stil
    font-size: 3rem
    color: red
    @include kutu(5px) 

.davar
    @include kutu(2px)

Yukarıdaki örnekte gönderdiğimiz parametre border ın kalınlığını değiştirmektedir. 

Css Ekran Çıktısı : 

.stil {
  font-size: 3rem;
  color: red;
  border: 5px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

.davar {
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

Eğer parametre gönderimi sağlamaz isek sass dosyamız hataya düşecektir. Bunun için parametre tanımlamalarımıza varsayınlan tanımlama yapabilmekteyiz. Biz boş parametre göndersek bile varsayınlan olan değer dönecektir.

@mixin kutu($border : 1px, $padd : 5px)
    border: $border solid #ddd
    border-radius: 5px
    padding: $padd

.stil
    font-size: 3rem
    color: red
    @include kutu(5px, 2px)

.davar
    @include kutu()

Css Ekran Çıktısı :

.stil {
  font-size: 3rem;
  color: red;
  border: 5px solid #ddd;
  border-radius: 5px;
  padding: 2px;
}

.davar {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}