CSS Preprocessor’ler (Ön-derleyiciler) ve SASS

Tarayıcılar her geçen gün daha hızlı gelişiyor ve web teknolojilerine daha hızlı adapte oluyorlar. Chrome ve Firefox gibi bu teknolojilerin gelişmesine destek de olan tarayıcılar kullanım oranları da artık çok arttı. CSS ise bu gelişmelerde hem en çok nasiplenen hem de eski tarayıcılardan dolayı kullanımında en çok baş ağrısı oluşturan konu oldu.

Bunlara bağlı olarak CSS kullanımındaki artış daha kolay yönetilebilir bir yapı ihtiyacını doğurdu. Bu ihtiyaca cevap olarak da CSS Preprocessorler(ön-derleyiciler) gibi çözümler ortaya çıktı ve kullanımı da oldukça yaygınlaştı.

CSS3 ile gelen bir çok özellik eski tarayıcıların güncellenememe problemleri yüzünden kullanılamıyordu. Ancak modern tarayıcıların kullanım oranlarındaki artışı, CSS kullanımını da arttırdı. Ancak CSS kullanımdaki bu artış ta bazı soru işaretlerine sebep oldu;

• Küçük bir değişiklik için tüm kodu taramak,
• Tekrarlı yazımlara engel olabilmek,
• CSS’in sebep olabileceği yavaşlıkları engellemek,

gibi kontrol altında tutmanızı sağlayan konularda dökümante edilebilen ve temiz bir kod için bir CSS yapısı ihtiyacını doğurdu.

Peki Preprocessor’ler (ön derleyiciler) tam olarak ne yapıyor?

Preporcessor’lerin yaptığı şey temelde size, yazılım dillerinde kullanabildiğiniz değişken, operatör ve fonksiyon gibi CSS içerisinde bulunmayan yapıları bir CSS Preprocessor ile kullanıp, bu dosyayı da bir CSS dosyası olarak çıktı almanızı sağlamaktır.

Artık CSS kullanımı sitenin en önemli yapılarından birisini oluşturuyor. Özellikle animasyonlardaki kullanımıyla bir web sitesinde dışarıdan bir js kütüphanesi vs. kullanmadan istediğiniz animasyonları kolayca yaptırabiliyor, herhangi bir görsel kullanmadan çok daha kaliteli ve piksel problemi olmayan butonlar, divler oluşturabiliyorsunuz. Tabii bu yapıyı doğru bir şekilde kurgulamadığınızda içinden çıkılmaz bir hal alabiliyor (tecrübeyle sabit).

CSS yazmak bir arayüz oluştururken en güzel aşamalardan birisi aslında. Ancak bazı noktalar var ki o akış içerisinde sürekli olarak geri dönüp bakmanıza sebep olabiliyor veya herhangi bir güncelleme esnasında çok fazla vakit kaybettiriyor. Bunlardan bazıları:

• Sitede kullanılan renk kodlarını her seferinde tekrar yazmak,
• Aynı özellikleri tekrar tekrar yazarak döküman boyutunu gereksiz yere arttırmak,
• Doğru bir hiyerarşi oluşturabilmenin zorluğu,
• Daha kolay kullanım için büyük CSS dosyalarında, CSS içeriğini ayrı dosyalarda tutamamak.

SASS Nedir?

SASS en sık kullanılan CSS preprocessor’lardan birisidir. Yalın CSS’in izin verdiğinden daha güçlü, temiz ve yapılandırılmış bir döküman oluşturmanızı sağlar. Yukarıda da bahsettiğim gibi CSS‘te var olmayan birçok özelliğin kullanılabilmesiyle daha düzgün ve kolay yönetilebilir söz dizimine sahip bir yapı sağlar.

SASS da, daha düzenli, değişkenler ve fonksiyonlarla daha kullanışlı ve okunabilirliği yükse bir kod yazmanızı ve bunları CSS’e aktarıp çalıştırmanızı sağlar.

Peki Sass yukarıdaki bu sorunların çözümünü nasıl sağlıyor?

Değişken Kullanımı

Sass ve diğer CSS ön işleyicilerinde özelliklerinden biri olan değişken kullanımı CSS dosyanızda bazı özellikleri (renk kodları gibi) değişkenlere bağlayarak Sass dosyanız içerisinde bu değişkenleri her yerde kullanabilmenizi sağlıyor.

@mixin ve @include kullanımı

Mixin belki de Sass’daki en çok kullanacağınız yapılardan biri. CSS’iniz için doğru bir yapı oluşturduğunuzda sitede birçok yerde kullandığınız CSS özelliklerini tek bir mixin altında tutarak, bunları @include ile çağırabiliyorsunuz.

@extend kullanımı

@Extend CSS içerisinde aynı tekrar tekrar yazmamak için kullanabileceğiniz bir özellik. Bu size hem kontrol açısından, hem de dosya boyutu açısından avantaj sağlayacaktır.

İç içe yapı — (Nesting) oluşturma

Bu kullanım sayesinde HTML içerisindeki iç içe yapıyı aynı şekilde burada Sass içerisinde de oluşturabilirsiniz. Böylelikle geriye dönük yapacağınız işlerde kolayca bir arada bulmanızı sağlar. Ancak daha sağlıklı bir yapı oluşturmak için, Sass’da oluşturacağınız bu iç içe yapılanmanın 4’ü geçmemesi tavsiye ediliyor.

@import kullanımı

Import özelliği aslında CSS’te de var olan bir özellik ancak, site açılış hızına olan negatif etkisinden dolayı tercih edilmiyor. Ancak Sass’ta bu dezavantajı farklı bir yolla avantaja dönüştürüyor. Dosyayı istediğiniz kadar parçaya bölüp, bunları ayrı sass dosyaları içerisine tutup, bu sass dosyalarını da ana sass dosyası içerisine çağırdığınızda, sass dosyanız CSS’e derlenirken [code]@import[/code] edilen diğer sass dosyalarıyla beraber bir tane css dosyasına dönüştürülüyor. Bu özellikle çok büyük yapılı projelerde hem css’lerinizi daha düzeli tutmanızı, hem de kolayca istediğiniz yere erişip, değişiklikleri hızlıca yapmanızı sağlar.

Sonuç

CSS bir arayüzün en önemli yapılarından birini oluşturuyor ancak salt CSS ile yukarıdaki problemlerin halledilebilmesi mümkün değil. Koca bir siteyi neredeyse tümüyle CSS üzerine bindirmek, yönetimi ve kontrolü bu kadar zor bir yapı içerisinde içinden çıkılmaz bir duruma düşmemize neden olabiliyor. Doğru dökümante edilmiş ve temiz bir kod yapısının önemini anlatmaya zaten gerek yok ama estetik ve kullanıcı deneyimi tarafında da işi bu kadar sırtlanan bir yapının “dökümante edilemez” durması bizi çok rahatsız eden bir durum.

Projelerimizde daha kolay yönetilebilir ve takip edilebilir bir kod yapısı oluşturabilmek için tartıştığımız zaman CSS ile ilgili nasıl bir yapı oluşturabileceğimiz konusunda CSS preprocessor’leri kullanmaya başladık. Diğer CSS preprocessor’lerin de hemen hemen aynı işleri yapabilmesine rağmen bizim Sass kullanmaya başlamamızdaki en önemli etken, çok fazla ve düzenli kaynaklara erişebilmemiz oldu. Aşağıda Sass ile ilgili mutlaka okumanızı tavsiye edebileceğim birkaç adres de ekledim.

Sass ile ilgili son söyleyeceğim şey, olabildiğince planlı bir şekilde yazmak için kendinizi zorlamanız. Çünkü Sass içerisine normal CSS yazım şekliyle de ilerleyebiliyorsunuz ve bir süre sonra yazdığınız Sass ile derlenen CSS arasında neredeyse hiçbir fark olmuyor. Bir CSS preprocessor kullanmaktaki amacınızın daha temiz ve dökümante edilebilen bir yapıya sahip olmak olduğunu unutmayın.

Birkaç Makale:

• Sass Guidelines: http://sass-guidelin.es/
• The Sass Way: http://thesassway.com/
• A Vision for Our Sass: http://alistapart.com/article/a-vision-for-our-sass
• Why Sass?: http://alistapart.com/article/why-sass
• SASS Style Guide: http://css-tricks.com/sass-style-guide/
• Sass Basics: The Mixin Directive: http://www.sitepoint.com/sass-basics-the-mixin-directive/
• Approaches to Media Queries in Sass: http://css-tricks.com/approaches-media-queries-sass/

Originally published at blog.designedbysherpa.com on March 18, 2015.