Sass Üzerine Birkaç Öneri

Modüler olarak düşünmek ve yapınızı kurmak “sass” dosyalarında da bir hayli önemli. Sass oldukça yorumlanabilir bir yapıya sahip. Kişinin kendisini rahat hissedeceği ve daha okunabilir olduğunu düşündüğü yazım şeklini bulması gerekiyor. Birçok geliştirici zaman içinde kendine çıkardığı notlarla söz konusu modülerliği ve okunabilirliği yakalayabiliyor. Bu durumun birçok farklı yorumlanabilme niteliği olduğunu belirterek birkaç maddede sass’a dair önerilerde bulunacağız.

Klasör yapısı

Sass’ın en kullanışlı özelliklerinden biri, stilleri olabildiğince parçalayarak çalışma ve tek bir dosyaya import edebilme. Böylece yığınlar arasında kaybolmadan daha odaklı bir şekilde çalışabiliyorsunuz. Burada çalıştığınız projenin niteliğine göre belirleyeceğiniz klasörlere stillerinizi dağıtmanız gerekiyor.

örnek klasör yapısı — sass

Oluşturduğunuz elementler, sayfalarınız, daha küçük parçalara ayırmak istediğiniz “component”larınız… Sizin ve üzerinde çalıştığınız projenin subjektifliğine kalmış bir yapı kurmanız gerekiyor. *

  • Sass dosyalarınızı tek bir style’de toplayıp çıktısını tek bir style dosyası olarak almak istediğiniz, parçaladığınız style dosyalarının isminin başına “_” koymanız yeterli olacaktır. Böylece gulp ya da benzeri bir araçla tüm sass klasörüne izleme komutu verdiğinizde, parçaladığınız dosyalardaki değişiklikler izlenir ama sadece tek bir dosya üzerinden işlem yapılır.

Belirli bir scope için değişken kullanımı (map & list)

Artık stil dosyalarının içinde de JavaScript’de olduğu gibi “oop” mantığını görebiliyoruz. Özellikle değişken kullanımı ve belirli bir blok içerisinde benzer değişken isimleriyle farklı değerler yaratabilmek bu konuda önemli faydalar sağlıyor.

Birkaç farklı sayfa, “component”, ya da modülle çalıştığınızı düşünün. Burada ihtiyacınız olacak değişkenler çeşitlenebilir. Global değişkenleriniz, eğer gerekliyse sayfalara özel değişkenler, sayfalar detaylandırıldığında da “component”lara özel değişkenler. Tüm bunları kendi kapsamında, kendi blokları içinde kullanarak, hem tanımladığınız stillerin birbirini ezmesini engeller hem de olası hataların önüne geçebilirsiniz.

Bu aşamada sass’in bize sunduğu map’leme yöntemi oldukça kullanışlı çözümler yaratabiliyor. Örneğin;

$colors: (
main: #1f3664,
bodyBg: #f3f2f0,
dark: #14141a,
darkGray: #666666,
lightGray: #f3f2f0,
success: #77bc1f
);
// örnek kullanım
.className {
color: map-get($colors, bodyBg);
}

“config.scss” ya da “settings.scss” dosyanızda bu şekilde tanımlayacağınız obje benzeri sass metotlarıyla çalıştığınız proje üzerine hakimiyeti daha kolay ve anlaşılabilir bir yapı kurabilirsiniz.

Ek olarak bu konuda sass’in sunduğu başka başka çözümler de mevcut. Oluşturduğu $colors değişkenin içindeki renk değerlerinden doğrudan dom içinde kullanabileceğiniz class’lar da üretmeniz mümkün.

@each $color-name, $color-code in $colors {
.color-#{$color-name} {
background: $color-code;
}
}

Çıktısı şu şekilde olacaktır:

.color-main {
background: #1f3664;
}
.color-bodyBg {
background: #f3f2f0;
}
...

Map fonksiyonun yanında list fonksiyonu da yine benzer amaçlarla kullanabileceğiniz bir metot.

$colors: #1f3664 #f3f2f0 #14141a #666666;
// örnek kullanım
color: nth($horse-types, 1);
// çıktısı
color: #1f3664

List fonksiyonu icon benzeri dosyalarınızın css içerisinde kullanımında çok daha kullanışlı olabilir. Örneğin:

$icons: facebook instagram twitter linkedin;

Yukarıdaki gibi bir liste oluşturduğunuzu düşünün. Sass’la birlikte bu listeyi döngüye soktuğunuzda, size çok daha kolay bir şekilde oluşturulmuş class’lar yaratmanıza imkan verebilir.

@each $item in $icons {
.icon-#{$item} {
background: image-url("img/icons/#{$item}.png") no-repeat;
}
}

Çıktısı şu şekilde olacaktır:

.icon-facebook {
background: image-url("img/icons/facebook.png") no-repeat;
}
.icon-instagram {
background: image-url("img/icons/instagram.png") no-repeat;
}
...

Son olarak, “list” ve ya “map” fonksiyonlarının tam olarak ne seviyede kullanılacağı konforun, içinde bulunduğunuz kod dizininin ve geriye bırakacağınız okunabilirlik mirasının tipine bağlı olarak tamamen size kalmış bir tercih olacaktır.