Sass-Scss Mixin Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

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

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