Sass ve Scss'te Function Kullanımı

Merhabalar. Bu yazımda SASS ve SCSS'te kullanılan function yapısından bahsedeceğim. Programlama dillerinden aşina olduğumuz üzere fonksiyonlar, kod bloklarının tekrar etmesini önleyen yapılardır.

Bir önceki yazımda SASS/SCSS'te mixin yapısını anlatmıştım. Mixin de aşağı yukarı aynı işi yapar ama aralarında çok ciddi bir fark var. Mixin, bir kod bloğunu istenilen yere dahil etmeye yarayan yapılardır. Mixin yapısında return kullanılmaz. Function ise değer döndüren bir yapıdır. Yani Function içerisinde istediğiniz işlemi yapıp bir değer döndürmeniz gerekiyor.

Gelelim function yapısının kullanılmasına. SASS'ta aşağıdaki gibi function tanımlaması yapılabilmektedir.

@function isim(parametreler)
    // Kodlar, işlemler
    @return deger

SCSS'de ise sadece süslü parantez ve noktali virgül farkı olacaktır.

@function isim(parametreler){
    // Kodlar, işlemler ve return;
    @return deger;
}

Öncelikle function yapısının nasıl çalıştığını anlamak için küçük ve basit bir örnek yapalım. Şimdilik parametre göndermeyelim. SASS ile başlayalım.

@function acikTema()
    @return #fff

body 
    background-color: acikTema()

Aynı örneği SCSS'de yapalım.

@function acikTema(){
    @return #fff;
}

body {
    background-color: acikTema();
}

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

body {
  background-color: #fff;
}

Görüldüğü gibi function yapısı içinden return edilen değer, fonksiyonu çağırdığımız yere eklenmiş oldu.

Örnek 2: Bu örneğimizde function yapısına parametre gönderelim ve bu parametreye göre return edeceğimiz değeri bir if-else bloğu içinde belirleyelim. SASS ile başlayalım.

@function tema($tema)
    @if ($tema == "acik")
        @return #fff
    @else if( $tema == "koyu" )
        @return #000
    @else if( $tema == "gri")
        @return #bbb

body 
    background-color: tema('koyu')

Aynı örneğe SCSS'te bakalım.

@function tema($tema){
    @if ($tema == "acik") {
        @return #fff;
    } @else if( $tema == "koyu" ) {
        @return #000;
    } @else if( $tema == "gri") {
        @return #bbb;
    }
}

body {
    background-color: tema('koyu');
}

Bu iki kod bloğunun da çıktısı aşağıdaki gibi olacaktır.

body {
  background-color: #000;
}

Örnekte tema adında bir function tanımlayıp yine $tema adında bir parametre belirledik. Fonksiyona gelen parametre değerine göre return edeceğim değeri belirledim. Örnekte parametre olarak "koyu" değeri gönderdiğim için fonksiyondan siyah rengin kodu olan #000 dönecektir.

Örnek 3: Bir dönüşüm işlemi ile devam edelim. Ölçü birimi PX olarak girilmiş bir değeri REM birimine çeviren function tanımlaması yapalım. Parametre olarak verilen PX değerini 16'ya böldüğümüz zaman bize REM değerini verecektir. Burada bir dipnot düşelim, neden 16 derseniz, çünkü body tagının varsayılan font yüksekliği 16 px'dir.

SASS ile başlayalım.

@function cevir($px)
    @return $px / 16 + rem

h1 
    font-size: cevir(32)

Aynı örneği SCSS'te yapalım.

@function cevir($px) {
    @return $px / 16 + rem ;
}

h1 { 
    font-size: cevir(32);
}

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

h1 {
  font-size: 2rem;
}

Kıyaslama yapacak olursak, function yapısını daha çok hesaplama yapacağımız zamanlarda kullanmanın mantıklı olduğunu söyleyebiliriz. Ancak birden fazla stil özelliği vermek istediğimiz zamanlarda mixin yapısını kullanmak daha mantıklı olacaktır.