Sass Nedir?
Sass Css’de bulunmayan programlamaya özgü birçok özelliği kullanarak daha pratik ve düzenli bir şekilde kod yazmamızı sağlayan bir Css ön-derleyicisidir.
Sass, Sass veya SCSS kullanılarak 2 sözdiziminde yazılabilir. SCSS ile Sass arasındaki tek fark SCSS’ de kullandığımız noktalı virgül (‘;’) ve süslü parantezleri(‘{}’) Sass’da kullanmamıza gerek olmaması.
Sass Compiler
Sass ile yazdığımız kodları Sass compiler ile derleyerek Css’e çevirmemiz gerekiyor. Çünkü sistem .scss uzantısını tanımıyor. Bunun için kullanılan programlar:
- Koala OS X, Linux ve Windows ortamlarında çalışır ve ücretsizdir. Aynı zamanda içlerinde en çok tercih edilen programdır.
- Compass.app’de OS X, Linux ve Windows ortamlarında çalışır ama bu program ücretlidir.
- CodeKit sadece OS X ortamında çalışır ve ücretlidir.
- Hammer’da sadece OS X ortamında çalışır ve aynı şekilde ücretlidir.
Sass ve Css arasındaki farklar:
Sass Css’in bir üst kümesidir. Css’de bulunmayan birçok ek işlev ve özelliği içinde barındırır. Daha temiz ve düzenli kod yazmamızı sağlar. Gereksiz kod kalabalığının önüne geçer.
Sass’da bulunan özelliklerden bazıları:
- Variables(değişken)
- Nesting(alt üyeler)
- Mixin(fonksiyon)
- Extend
- Operators(Operatörler
Variables ve Nesting:
Kodlarımıza değişken ekleyerek bir özelliği birden fazla seçiciye(selectore) tanımlayabiliriz. Yani her seferinde aynı değeri tek tek girmemize gerek kalmaz.
Aynı zamanda alt üyeler tanımlayarak da kolayca atanacak kod bloğu belirleyebiliriz.
Variables örneği:
Sass:
Css:
Nesting örneği:
Sass:
Css:
Mixin:
Mixin bir kod bloğu tanımlayıp onun istenilen yerde çağırılmasını sağlar. Yani bir bakıma programlama dilindeki fonskiyon (function) işlevini görür.
@mixin’e kod bloğu tanımladığımız zaman @include kullanarak çağırmamız gerekiyor.
Sass:
Css:
Çağırdığımız mixin kod bloğunda projemizdeki her elemente göre değişen değeri (her butonun farklı rengi, boyutu vs) belirlemek için dolar işareti ($) ile bir parametre atıyoruz. Ve bu sayede mixin kod bloğunu çağırdığımız zaman eklediğimiz parametreye istediğimiz özelliği atayabiliyoruz.
Sass:
Css:
Extend:
Programlama dilindeki miras(kalıtım) yapısına benzemektedir. Tek bir class’a birden fazla özellik yazıp sonra bu özellikleri kullanacağımız bütün seçicilerde bu classı @extend ile çağırararak fazla kodlardan kurtulmuş oluruz.
Sass:
Css:
Operators:
Matematiksel işlemleri CSS’de yapmamıza olanak sağlar.
Ben Çağla Pekoğlu. Sass anlatımımın sonuna geldik. Anlamadığınız yerlerde sormaktan çekinmeyin, iyi çalışmalar 😊
Bana ulaşmak için websitemi ziyaret edebilirsiniz..