Sass-Scss Fonksiyon Kullanımı

Sass ve scss de fonksiyon kullanımı programlama dillerindeki ile birebir aynıdır tek farkları sass ve scss de ki fonksiyonlardan geri bir değer dönmesi gerekmektedir.

Fonksiyon kullanımında @function funcAdi() şeklinde kullanımı mevcuttur. Fonksiyon içerisinde geri değer döndürürken @return ile işlem sağlamaktayız.

@function boyut()
    @return 18px

Yukarıdaki basit bir örnek bulunmaktadır. Bu fonksiyonu bir stil blogu içerisinde çağırdığımızda bize 18px değerini döndürecektir.

@function boyut()
    @return 18px

.stil
    font-size : boyut()

Css Ekran Çıktısı : 

.stil {
  font-size: 18px;
}

Bu fonksiyonları parametre gönderimi sağlayarak daha kullanışlı hale getirebiliriz.

@function boyut($olcu : null)
    @if( $olcu == "buyuk")
        @return 2rem
    @else if( $olcu == "kucuk")
        @return 0.5rem
    @else
        @return 1.1rem  
             
.stil
    font-size : boyut(kucuk) 

Css Ekran Çıktısı : 

.stil {
  font-size: 0.5rem;
}

Yukarıdaki örnekte Fonksiyon içerisinde if else kullanımı ile kullanıcı girişine göre ölçü birimi geri döndürmektedir. Burada en önemli nokta ise Kullanıcı fonksiyonu çağırırken bir değer girmememiz durumunda ise $olcu değeri null olarak tanımlanacak ve @else bloğumuz çalışacaktır.