Sass kod yazarken büyük kolaylık sağlaması ile ünlü olmaktadır. Bir kod yazmadan önce tamamlayıcı bir görev üstlenen sass sayesinde kod yazmak daha kolay ve etkili bir hal almaktadır. Performanslı yapısı sayesinde kod yazanlar için ideal çözümler sunmaktadır. Bunun yanında Sass haritalarda önemli olmaktadır. Şimdi sass haritaların nasıl kullanıldığına ve bazı örnekler bakalım.
Öncelikle Sass3.3 ile başlayabiliriz. Sass3.3 kullanım için ideal bir yapı olarak görülebilir. Değer girerken vb. performanslı yapısı ile gayet ideal çözümler sunmaktadır. Harita oluşturmak için ise yapılması gereken bazı işlemler bulunmaktadır. Bu haritalar oluşturduktan sonra bu maharetli yapı kullanılabilir.
$map: (
key: value,
nextkey: nextvalue
);
Yukarıda ki görülen kod yapısı ile ilk yapı işlemleri yapılmaktadır. Bundan sonra ki süreçte ise değer girme işlemler için yine birtakım kodsal düzenlemeler yapılacaktır.
.element:before {
content: map-get($map, key);
}
Burada anahtar kelime ve anahtar değerlere girilecektir. Bu parametreler sayesinde değişkenler daha performanslı ve etkili bir biçimde çalışacaklardır. Bu süreç de daha etkili bir çalışma bu yapılar sayesinde mümkün olmaktadır. Bir sınıf niteliğinde olan bu yapı sürekli değer girmek gibi zorlu bir durumdan kurtarma işlevi üstlenmektedir. Daha akıcı ve bir kod yazma süreci için ideal çözümler bu şekilde sağlanır.
.element:before {
content: value;
}
Son çıktı değeri ise yukarıda ki kod yapısında bulunmaktadır.
Diğer işlemler ise bu yapının devamı niteliğinde olmaktadır. Kalıp aynı şekilde olduğundan ana tema yukarıda ki kod yapısında olmaktadır. Yukarıda ki kod yapısının türevleri şeklinde düzenlemeler yapılmaktadır.
ÖRNEKLER
İl örnekte bir döngü yapısı verilebilir. Döngü yapıları ile öğeler daha kolay bir şekilde kontrol edilecektir. Tek tek yapılan işlemler bu sayede daha kolay bir şekilde yapılır.
$icons: (
checkmark: a,
plus: b,
minus: c
);
Öncelikle tek bir yapı içerisinde toplanan öğeler bu sayede daha kolay bir şekilde değerlerini alırlar. Tek tek farklı yerlerde değerler vermektense tek bir yerde değer verip sonra istenilen yerde çağırmak gayet iyi bir yapı ortaya çıkaracaktır.
@each $name, $value in $icons {
.icon--#{$name} {
content: $value;
}
}
Bundan sonra da her bir anahtar için sınıflar yapılmaktadır. Bu sayede aynı üstteki yapıda olduğu gibi tek bir yerde işlemler yapılmaktadır. İstenildiği yerde kullanmak mümkün olmaktadır.
.icon--checkmark {
content: "a";
}
.icon--plus {
content: "b";
}
.icon--minus {
content: "c";
}
Görüldüğü gibi yukarıda tanımlanan iconların içerikleri burada kolay bir şekilde girilmektedir. Tanımlanan sınıflar sayesinde daha kolay ve hızlı bir şekilde değer girilmesi de projenin akışını olumlu yönde etkilemektedir. Sass ile bu işlemler kolayca yapılır.
