SASS ve SCSS'te Mixin Kullanımı

Mixin konusu SASS resmi sayfsasında "interpolation" kavramı adı altında verilmektedir. Interpolation, ekleme yapma ve ara değer ekleme anlamlarına geliyor. SASS ve SCSS'te mixin, tanımlanan kod bloğunun istenilen yerde çağırılabilmesi ve buraya eklenebilmesi amacıyla kullanılıyor. Kullanım açısından programlama dillerindeki function yani fonksiyonlara benziyor ancak mixin yapısı bir değer döndürmez (return), belirlenen kod bloğunu çağırmaya yarar.

SASS'ta mixin tanımlamak için aşağıdaki yapı kullanılır.

@mixin isim(parametreler)
   // Kodlar, özellikler

SCSS'de ise sadece köşeli parantez farkı bulunmaktadır.

@mixin isim(parametreler){
   // Kodlar, özellikler
}

Kullanıma baktığıımz zaman büyük bir kolaylık dikkatimizi çekiyor: Parametre kullanımı. Gerçekten de parametre alabiliyor olması, tekrar eden işlemlerde mixin yapılarının kullanılmasını cazip hale getiriyor.

Oluşturulan mixin yapıları çağılırken @include komutu kullanılır. Küçük bir örnekle başlayalım.

@mixin boyut
    width: 100px
    height: 100px

.urun
    float: left
    @include boyut

Örneği yakından inceleyelim. Parametresi olmayan, boyut adında bir mixin tanımladım. Aşağıda oluşturduğum .urun class'ında ise include ile bu mixin yapısını çağırdım. Bu mixin yapısı içinde yer alan width ve height özellikleri .urun class'ı içerisine eklenecektir. Yani çıktı aşağıdaki gibi olacaktır.

.urun {
  float: left;
  width: 100px;
  height: 100px;
}

Aynı örneği SCSS ile yapacak olursak sadece süslü parantez ve noktalı virgül farklılığı olduğuna tanık olacağız.

@mixin boyut {
    width: 100px;
    height: 100px;
}

.urun {
    float: left;
    @include boyut;
}

Farklı bir örnekle devam edelim. Bu sefer aynı mixin yapısına parametre gönderelim. Daha önce değişken kullanımını incelemiştik. Mixin yapılarında değişkenler sayesinde parametre alabilmekteyiz.

@mixin boyut($genislik,$yukseklik)
    width: $genislik
    height: $yukseklik

.urun
    float: left
    @include boyut(200px,400px)

Örneği yakından inceleyelim. Tanımladığım boyut adındaki mixin yapısı $genislik ve $yukseklik adıyla iki tane parametre alıyor. Aşağıda tanımladığımız .urun class'ı içinde boyut yapısını çağırırken artık parametre göndermem gerekiyor. Önce $genislik değeri için 200px, sonra $yukseklik değeri için 400px gönderdim. Artık width ve height özellikleri parametre olan gelen değerleri alacaktır. Kod bloğunun çıktısı aşağıdaki gibidir.

.urun {
  float: left;
  width: 200px;
  height: 400px;
}

Aynı örneği SCSS ile yapalım. Sadece süslü parantez ve noktalı virgül farkı olacaktır.

@mixin boyut($genislik,$yukseklik) {
    width: $genislik;
    height: $yukseklik;
}

.urun {
    float: left;
    @include boyut(200px,400px);
}

Farklı bir örnekle devam edelim. Kendi projelerimde kullandığım bir örneği yapalım. Tanımladığımız bir mixin yapısı ile bir elementin arkaplan ve yazı rengini ayarlayalım.

@mixin renk($arkaplan,$yazi)
    background-color: $arkaplan
    color: $yazi

.liste 
    float: left
    @include renk(#d40404,#fff)

Aynı örneğin SCSS ile yapımı aşağıdaki gibidir.

@mixin renk($arkaplan,$yazi) {
    background-color: $arkaplan;
    color: $yazi;
}

.liste {
    float: left;
    @include renk(#d40404,#fff);
}

Biri SASS, diğerini SCSS ile yaptığımız bu iki örnekte renk adında bir mixin tanımladık ve $arkaplan ile $yazi isimlerinde iki parametre gönderdik. Bu parametrelerin birini background-color, diğerini ise color özelliğinde kullandığım. Bu mixin yapısını çağırırken ise parametre olarak renk kodları gönderdim. Burada şu noktaya dikkat etmek lazım, bir class içerisinde hem CSS özelliği hem de mixin yapısını kullanabilirsiniz. Örnekte olduğu gibi.

Bu kodların CSS çıktısı aşağıdaki gibi olacaktır.

.liste {
  float: left;
  background-color: #d40404;
  color: #fff;
}

Son bir örnekle bitirelim. font adında bir mixin yapısı tanımlayıp, parametre olarak font adı ve genişliği göndereceğim. Ardınan bu parametreleri font-family ve font-weight özelliklerinde kullanacağım.

@mixin font($fontAdi,$fontGenislik)
    font-family: $fontAdi
    font-weight: $fontGenislik

.baslik
    @include font('Raleway',400)

Aynı kodların SCSS'de yazımı aşağıdaki gibidir.

@mixin font($fontAdi,$fontGenislik) {
    font-family: $fontAdi;
    font-weight: $fontGenislik;
}

.baslik {
    @include font('Raleway',400);
}

Bu kodların CSS çıktısı ise şu şekildedir.

.baslik {
  font-family: "Raleway";
  font-weight: 400;
}

Özetleyecek olursak mixin yapılarını tekrar eden kod bloklarını, tıpkı programlama dillerindeki fonksiyonlar gibi, bir kere tanımlayıp, istediğimiz yerde defalarca kullanmak olarak tanımlayabiliriz.