SCSS Az Bilinen Yönleri ve 7–1 Mimari

Frontend geliştirmelerinde CSS kodlama en çok vaktimizi alan süreç. CSS syntax olarak çok basit görülse de -ki statik bir işaretleme dili olması itibari ile bu bir gerçek- çok fazla tekrarların olması ve büyük projelerde mimari olarak yönetilebilme sorunu ile boğuşmak zorunda kalıyoruz. Bu durumları kolaylaştırmak için, CSS’ i bir programlama dili gibi kullanmak ve aslında CSS yazmak yerine CSS ürettirmek için bazı ön işleyicilerin geliştirilmeleri düşünülmüş. Bunlardan en çok akla gelen ve kullanılan ikisi ön plana çıkıyor LESS, SASS. Bu makalede benim kullandığım SASS / SCSS nin çok fazla kullanılmayan yönlerine değineceğim. Son bölümde de en çok tercih edilen mimari yapısından söz edeceğim. Başlıkta belirttiğim özellikleri anlatmaya geçmeden önce, SASS dan kısaca bahsetmek istiyorum.

Sass, Syntactically Awesome Style Sheets ifadesinin kısaltmasıdır.

SASS, en popüler CSS ön-işlemcilerinden biridir. Olgun, istikrarlı, güçlü profesyonel seviyedeki CSS formatına derlenebilen dinamik bir biçim şablon dilidir.

Sass 2006 yılında Hampton Catlin tarafından, CSS ve CSS3’ü Ruby diline benzer bir yapıyla geliştirmek fikri ile ortaya çıktı. 2008 yılına kadar Hampton tarafından geliştirilmeye devam eden SASS, şu anda Github üzerinde bulunan repo ile yüzlerce developer tarafından geliştiriliyor.

SASS fikri ilk ortaya çıktığında sadece sass uzantılı dosyalar üretiyordu. SASS, Ruby gibi planlandığından dolayı, süslü parantezler “{}” ve noktalı virgül “;” kullanılamamaktadır. Fakat ilerleyen süreçlerde kullanım oranı arttıkça frontend geliştiricilerin CSS’ ten gelen el alışkanlığı göz önünde bulundurularak, söz dizimi değişti ve SCSS olarak yeniden şekillendi. Şu an da transpiler paketler her iki uzantıyı da sorunsuz bir şekilde CSS e çevirmektedir.

Gelelim bu makalenin konusu olan SCSS’ in az bilinen ve kullanılan yönlerine, frontend geliştiriciler arasında çok büyük oranda, sadece nested yapısı ve değişken kullanımı şeklinde kullanılan SCSS, frontend programlama dili olan Javascript’e benzer şekilde döngüler (for, each, while), karar yapıları (if, else), fonksiyonlar (function, mixin), içe içe (nesting) seçici kullanımı, miras seçiciler (selector inheritance) kullanabilmektedir. Bahsettiğimiz tüm opertörler, seçiciler ayrı ayrı makale konusu olabilecek genişlikte. Şimdi SCSS az bilinen yönlerine göz atalım.

Interpolation Operator

String veri tipi ile kullanılan interpolation operator, bir değişkene tanımlanmış string veri tipinin kullanımında bize kolaylık sağlamaktadır. Ayrıca yine bir string içinde değişken kullanmak ya da matematik işlemleri yapmak için kullanılabilmektedir.

Global ve yerel değişkenler

SCSS ile Javascript’ten aşina olduğumuz şekilde scope içinde ve dışında tanımlanmış değişkenleri global ve yerel değişkenler olarak kullanabiliriz.

Inheritance

SCSS de, base bir klastan miras alarak geliştirmemizi yapabiliriz. Bunun için kullandığımız @extend yapısı, bize daha az kod yazmayı sağladığı gibi daha yönetilebilir bir mimari de sunmaktadır. Aynı zamanda CSS çıktısının da daha az kod ile oluşmasını sağlamaktadır ve HTML içinde de daha az klas seçici ekleyerek ara yüzü yönetebilme kolaylığı elde ederiz.

Placeholder Selector

SASS / SCSS, palceholder selector adı verilen özel bir seçici türünü destekler. Bir sınıf seçici ya da ID seçici gibi görünürler fakat sadece @extend yönergesi ile kullanılabilir. Placeholder kullanan kural kümeleri CSS’ e işlenmez.

Şimdi gelelim benim de kullandığım 7–1 Achitecture konusuna.

Temel olarak 7 klasör ve 1 dosyadan oluşan bu mimari desende, daha yönetilebilir kod yapısı öngörülmekte. Sırasıyla, abstract, base, components, layout, pages, themes, vendors klasörleri ile main.scss dosyasından oluşur. Klasörlerin isimlerinden genel olarak hangi işlev için kullanıldıkları açıkça belli olmasına rağmen kısaca açıklamakta fayda görüyorum.

Abstract:

Variables, mixins, functions gibi araçların olduğu, aktif geliştirme yapmadığımız, dosyaları tuttuğumuz klasördür.

Base:

Reset, typograpy, general gibi projenin genelinde kullandığımız stil dosyaları tuttuğumuz klasördür.

Components:

Adından da anlaşıldığı üzere, atomik yapıda button, select, dropdown stil dosyalarını tuttuğumuz klasördür.

Layout :

Header, footer, sidebar vb. genel layout nesnelerinin stil dosyalarını tuttuğumuz klasördür.

Pages:

Sayfa stil dosyalarını tuttuğumuz klasördür.

Themes:

Admin, darktheme vb. tema stil dosyalarını tuttuğumuz klasördür.

Vendors:

Bootstrap vb. üçüncü parti kütüphanelerin stil dosyalarını tuttuğumuz klasördür.

Son olarak. main.scss dosyası tüm klasörlerin birleştirilip dışarı açıldığı klasördür.

CSS ön işleyiciler frontend dünyasına girdiğinden bugüne kullanımları katlanarak artmakta ve popüler olan şablon dillerinin de geniş bir komünite tarafından geliştirilmesi devam etmektedir.