Yücel Alkan

SASS ve SCSS'te Map-Get Kullanımı

Merhabalar. Önceki yazımda SASS ve SCSS'te değişken kullanımına değinmiştim. Bu yazımda ise yine değişkenlerle alakalı olan map-get kullanımına bakacağız.

Daha önce programlamayla ilgilenenler swicth-case yapısını biliyordur. İşte SASS ve SCSS'teki map-get kullanımını ben buna benzetiyorum. map-get ile bir değişkene duruma bağlı olarak değer atayabiliriz. 

İlk örneğimizle başlayalım. 

$renk: ("acik" : #fff, "koyu" : #000, "gri"  : #ddd)

body 
    background-color: map-get($renk,"acik")

Örneğe yakından bakalım. $renk değişkeni duruma göre üç farklı değer alabilmektedir. Burada map-get fonksiyonu kendisine gelen değere göre $renk değişkenine değer atamaktadır. Ben "acik" değerini gönderdiğim için $renk değişkeni #fff değerini alacaktır. Eğer "koyu" değerini gönderirsek #000, "gri" değerini gönderirsek #ddd değeri $renk değişkenine eşitlenecektir. Gördüğünüz gibi oldukça pratik bir kullanım. 

Aynı örneği SCSS ile yapalım. 

$renk: (
    "acik" : #fff, 
    "koyu" : #000, 
    "gri"  : #ddd
);

body {
     background-color: map-get($renk,"acik")
}

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

body {
  background-color: #fff;
}

Farklı bir örnekle devam edelim. $boyut adında bir değişken tanımlayalım ve duruma göre farklı değerler atamaya çalışalım.

$boyut: ("buyuk" : 20px, "orta" : 16px, "kucuk" : 12px)

h1 
    font-size: map-get($boyut,"buyuk")

p
    font-size: map-get($boyut,"orta")

span
    font-size: map-get($boyut,"kucuk")

Örnekte görüldüğü gibi $boyut değişkeni, duruma göre üç farklı değer almaktadır. h1 elemanı için map-get fonksiyonuna "buyuk" değerini gönderdik, o yüzden bize 20px değerini döndürecektir, yani $boyut değişkeni 20px olacaktır. p elementinde "orta" değerini gönderdiğimiz için $boyut değişkeni 16px, span elementine ise "kucuk" değerini gönderdiğimiz için $boyut değişkeni "12px" değerini alacaktır.

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

$boyut: (
    "buyuk" : 20px, 
    "orta" : 16px, 
    "kucuk" : 12px
);

h1 {
    font-size: map-get($boyut,"buyuk");
} 
    

p {
    font-size: map-get($boyut,"orta");
}
    

span {
    font-size: map-get($boyut,"kucuk");
}

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

h1 {
  font-size: 20px;
}

p {
  font-size: 16px;
}

span {
  font-size: 12px;
}

İki örnekte de görüldüğü üzere; map-get ile bir değişkene duruma bağlı olarak değer atayabiliriz. Yazımın başında söylediğim gibi programlama dillerindeki switch-case yapısına benziyor. Büyük çaplı projelerde tema, font büyüklüğü gibi duruma bağlı olarak bir değişkene değer atamanız gereken durumlarda kullanılabilir.

Bu içeriğe ait video derse aşağıdan ulaşabilirsiniz.

Soru, görüş ve önerilerinizi yorum olarak belirtebilirsiniz. Hayırlı çalışmalar dilerim.

09.09.2019
5682
Yorumlar
Bu içeriğe henüz yorum yapılmamıştır. İlk yorum yapan siz olun!
Yorum Yapın