Sass-Scss Fonksiyon Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

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.

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