Sass, diğer bilinen adıyla (ya da uzantısıyla diyelim) Scss nedir konusuna değinmek istedim.

Daha önce pek kullanmadığım fakat internette bolca gördüğüm bir konuydu ve daha önce mantığını araştırmışlığım vardı. Nitekim ihtiyaç duymadığım için üstüne düşmeye gerek de görmemiştim fakat ihtiyaç duymaya başlayınca araştırmam gerekti… İyi ki de araştırmışım ve kullanmaya başlamışım dedim çünkü bildiğim özelliklerden fazlasına sahipmiş. Gelelim fasulyenin faydalarına;

Sass Nedir ?

Sass; dünyadaki en olgun, stabil ve güçlü, profesyonel seviyedeki bir CSS uzantısı dildir.

Sass-lang.com‘daki kendi mottoları bu şekilde (en azından ben böyle çevirebildim). Gayet kendinden emin bir cümle olmasının yanı sıra Bootstrap, Ionic gibi güçlü frameworkler de Sass kullandığı için bence haklı olabilirler de… tabii Less ile karşılaştırınca da durum böyle, nitekim biraz karşılaştırma makalelerine baktım ve Sass’ın ben de daha güçlü olduğuna karar kıldım – ya da aldandım diyebilirim de.

Benim için Sass nedir ona gelecek olursam; değişken, function, inheritance (kalıtım), matematik işlemleri yapma gibi CSS’te ihtiyaç duyduğum aksiyonların olduğu, daha üst düzey bir CSS dilidir. Kısacası; daha dinamik bir CSS dilidir.

Değişkenler (Variables)

En çok beğendiğim özellik olan, CSS’te değişken kullanabilme alt yapısıdır.

Kullanımı gayet kolay, tek yapmanız gereken; global scopeta dolar işareti $ ile başlayıp tanımlamak ve ardından kullanmak.

çıktısı ise

yukarıdaki gibi olacaktır. Aynı değişkeni bir çok yerde kullanabilirsiniz elbette, fakat aynı değişken ismini yeniden tanımlayamazsınız.

İçerleme (Nesting)

İçerleme doğru bir isim olmayabilir aslında fakat hiyerarşi de demek istemiyorum çünkü hiyerarşik bir şekilde olmayabilir sizin kullanımınız.

İçerlemede ise olay iç içe yazarak ebeveyn çocuk mantığı gibi ilerleyerek yazmanızı sağlıyor.

çıktısı;

Gördüğünüz gibi hepsini nav içine aldı. Daha da iç içe yazabilirsiniz elbette, ileri kullanımda ampersand & işareti de yer almakta fakat buna değinmeyeceğim — kafa karıştırmayalım boşuna.

Parçalama (Partials)

Parçalama, içeri aktarma işleminde kullanmak için yapılan dosyaları parçalama işlemi oluyor. Bunun için ana Sass dosyanızın olduğu yere alt çizgi _ ile başlayan dosyanızı oluşturuyorsunuz ve import ediyorsunuz.

İçeri Aktarım (Import)

CSS’teki içeri aktarma mantığı gibi içeri aktarma, sadece partial yapılmış bir dosyayı içeriye aktarıyorsunuz ve dosya adını, başında alt çizgi sonunda uzantısı olmadan yazıyorsunuz.

2 adet scss dosyası oluşturalım. Birisi style.scss diğeri ise _sub.scss isminde olsun.

_sub.scss:

style.scss:

çıktısı ise aşağıdaki gibi olacaktır.

Katmalar (Mixins)

Aslında daha çok functionlar olarak adlandirmak daha mantikli fakat tam olarak bir function değil, yani hesap vs yaptırmıyorsunuz…

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

Çıktısı ise;

olacaktır. Sanırım mantığı anlamışsınızdır, include ettiğiniz her yerde aynı parametreleri yeniden yazmak zorunda kalmayacaksınız…

Kalıtım (Inheritance)

Kalıtım Sass’ın en büyük avantajlarından birisi… @Extend i kullanarak ortak CSS yapısı kullanan tüm elementleri bir araya toplatabilirsiniz, bunu örnekle açıklamak daha mantıklı olacaktır, daha rahat anlaşılır bu şekilde

Çıktısı;

.success, .error ve .warning’te ayrı ayrı .message’a extend ettik ve .message son olarak hepsini kapsadı.

Operatörler (Operators)

Ve yine benim en çok sevdiğim özelliği diyebileceğim özelliğine geldik; matematiksel operatörler.

CSS’te matematik işlemleri yapmak gerçekten işlerinizi kolaylaştırabilir. Bu matematik operatörleri; +-, *, / ve %.

çıktısı ise aşağıdaki gibi olacak;

Şimdilik Sass (Scss) ile ilgili benden bu kadar, örnek kullanım vs için belki tekrar bir yazı yazarım.

Kolay gelsin ;)