Dinamik CSS Dilleri #1

Image for post
Image for post

Hızla gelişen teknoloji ve yenilikler, biz geliştiriciler içinde yerinde saymıyor. Yeni programlama ve biçimlendirme dilleriyle birlikte, son yıllarda web tasarımcılarında işlerini kolaylaştıracak framework ve araçlar çıkmaya başladı. Bu araçların çıkması birlikte front-end development tarafındaki işleri fazlasıyla keyifli hale getiriyor.

Bu yazımda sizlere başlıca kullanılan dinamik CSS dillerinin benzerliklerinden ve farklılıklarından bahsedeceğim.

Öncelikle SASS, SCSS, LESS ve Stylus’tan bahsedelim.

SASS, CSS formatına derlenebilen dinamik bir biçim şablon dilidir. İlk olarak Hampton Catlin tarafından tasarlanmış ve Natalie Weizenbaum tarafından programlanmıştır. Zamanla değişkenler, iç içe seçiciler ve döngüler gibi, CSS yazarlarına duyulmamış yeni özellikler eklenmiştir.

SCSS, Sass’ın yeni bir versiyonudur. Sass’ın tüm özelliklerine sahiptir, fakat yazım kuralları farklıdır. “Yazım kurallarındaki değişiklikleri görmeniz için SCSS’ı farklı bir dil gibi ele alacağım.”

LESS, CSS formatına derlenebilen açık kaynak kodlu dinamik bir biçim dilidir. Less, Sass’tan esinlenilerek Alexis Sellier tarafından tasarlanmıştır ve Sass’ın yeni bir versiyonu olan Scss’e ilham kaynağı olmuştur.

STYLUS, CSS’ye derleyen yenilikçi bir stil sayfası dilidir. Sass’den esinlenilen Stylus, node.js ile oluşturulmuştur.

Söz Dizimi (Syntax)

Sass’ta noktalı virgül ve süslü parantezleri olmayan eski bir söz dizimine sahiptir.

Scss ve Less’in söz dizimi normal CSS söz dizimine benzer. Birbiri ile aynıdır.

Stylus ise, standart CSS söz dizimini kabul eder, ancak parantezlerin, iki nokta üst üste ve yarı yazı dizilerinin isteğe bağlı olduğu bazı diğer varyasyonları da kabul eder. Yani hem Sass, hemde Scss gibi bir yazım şekli mevcuttur.

Değişkenler (Variables)

Dinamik CSS dosyalarında değişkenler tanımlayıp bunları stil sayfası boyunca kullanabiliriz.

Sass ve Scss değişkenleri “$” sembolü ile eklenir. Scss’de değişken ve değer bir CSS özelliği gibi, iki nokta ile eşitlenip, noktalı virgülle ayrılır. Sass’ta değişkenlerini ayırmak için bir şey eklemek gerekmez.

Less değişkenlerinin yazım şekli tam olarak Scss değişkenleriyle aynıdır, ancak değişken isimleri için“@” sembolü kullanılması gerekmektedir.

Stylus, “$” sembolüne izin verse de, öncesinde bir şey ekleme zorunluluğu yoktur. Söz diziminde olduğu gibi burada da farklı varyasyonları kabul eder. Sizi sembollere zorunlu bırakmaz.

İç içe seçiciler (Nesting)

Dinamik CSS Dillerinin en keyifli tarafı iç içe yazılan seçicilerdir.

Scss, Less ve Stylus’un iç içe seçicilerinin kullanış biçimi aynıdır. Süslü parentez kullanımı ile iç içe ekleyebiliriz. Bu 3 dille yazılmış bir kodlara baktığınız zaman standart yazılmış bir CSS kodundan daha okunaklı olduğunu hemen fark edersiniz. “:hover”,”:before”,”:after” ve ”:nth-child” gibi sözde seçicileri de “&” operatorü ile birlikte kullanabiliyoruz.

Sass’ta noktalı virgül ve süslü parantezleri olmayan söz dizimi, burada da söz konusudur.

Katmalar (Mixins)

Aslında kullanış biçimi olarak daha çok function’lara benzemektedir. Ama bir hesaplama yapma söz konusu değil. Function olarak isimlendirmek mantıklı olsa da tam olarak bir function da değil.

Daha çok CSS3’ün tarayıcı uyumları için kullanılmakta fakat farklı işlemler için de kullanılabilir.

Kalıtım (Inheritance)

Kalıtım, Dinamik CSS dillerinin en büyük avantajlarından birisi sayılır.
Sass, Scss ve Stylus’ta kullanım aynıdır. Hepsinde “@extend” kullanarak ortak CSS yapısı kullanan tüm elementleri bir araya toplayabiliriz.

Less’te durum biraz daha farklıdır. Ortak kullanılacak stilleri her elementin kendi içerisine atayacaktır.

CSS çıktısı ise diğer dillere göre daha farklı. Aşağıdaki örnekte bunu görebilirsiniz.

İçe Aktarım (Import)

CSS’teki içeri aktarma mantığı ile aynıdır.

CSS, stillerinizi bölümlere ayırmanızı sağlayan bir içe aktarma seçeneğine sahiptir. Tek dezavantajı, CSS’de @import’u her kullanışınızda başka bir HTTP isteği oluşturmasıdır. Dinamik CSS dilleri, mevcut CSS @import’un üzerine inşa edilir, ancak bir HTTP isteğini gerektirmek yerine, ana dosyayla birlikte içe aktardığınız dosyayı birleştirir ve böylece tek bir CSS dosyasını web’e sunabilirsiniz.

Bunu yaparken dosya adını ve başında alt çizgi sonunda uzantısı olmadan da yazabiliyoruz. Bu tamamen sizin alışkanlığınıza bağlıdır.

Tüm dinamik CSS dillerinde içe aktarma mevcut CSS de olduğu gibi “@import” ile yapılır. Sadece Stylus’ta ilaveten “@require” komutuyla da içe aktarım yapabilirsiniz.

Bu makalemi daha uzun olmaması için burada tamamlıyorum. Dinamik CSS dillerinin yazılış biçimi her ne kadar farklı olsa da, bize dönen sonuç hep aynı olacak. Sonuç olarak hepsi CSS ve CSS3'e hizmet etmektedir.

Burada önemli olan hangisini size daha kolay ve hızlı geldiğidir.

Bir sonraki makalede görüşmek üzere hoşça kalın…

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store