SASS Nedir? SCSS Nedir? Avantajları Nelerdir?

Bu yazımda SASS nedir? SCSS nedir? Avantajları nelerdir? gibi konulardan bahsedeceğim. Daha sonra da uygulamalı olarak SCSS derslerine başlayacağız.

Css’i belli bir seviyede öğrendikten sonra sizde Css kodları yazarken kod tekrarı yapıldığının farkındasınızdır. Çünkü yazdığımız Css kodları dinamik değil statiktir.

Css kodlarını yazarken bunu dinamik bir şekilde yazabilseydik güzel olmaz mıydı?

Elbette olurdu.

İşte Css kodlarını dinamik bir şekilde yazabilmek için SASS ve LESS gibi Css ön işlemcilerinden birini kullanmamız gerekiyor.

SASS NEDİR? SCSS NEDİR?

SASS’ın açılımı Syntactically Awesome Style Sheets‘dir. SASS güçlü, istikrarlı ve en popüler Css ön işlemcisidir.

2006 yılında Hampton Catlin tarafından Css kodlarını Ruby diline benzer şekilde yazabilmek için geliştirildi. Şuan da ise onlarca geliştirici Github üzerinden SASS’ı geliştirmeye devam ediyor.

SASS ile programlama dillerinde olduğu gibi değişkenleri, fonksiyonları, döngüleri, karar yapılarını ve daha fazlasını kullanarak Css kodlarımızı dinamik bir şekilde yazabiliyoruz. Bu sayede kod tekrarının önüne geçerek çok daha hızlı bir şekilde projelerimizi geliştirebiliyoruz.

Peki SCSS Nedir?

SASS’ın en büyük dezavantajlarından birisi, SASS kodları yazarken noktalı virgül (;) ve süslü parantez ({}) kullanılmamasıdır. Çünkü SASS ilk geliştirildiğinde söz dizimi Ruby diline benzer olarak geliştirilmişti.

Css kodları yazarken noktalı virgül (;) ve süslü parantez ({}) i kullanıyoruz. Doğal olarak Css’ten SASS’a geçişte yılların vermiş olduğu el alışkanlığımızı bir anda bırakamıyoruz.

İşte bu problemi gören SASS geliştiricileri söz dizimi üzerinde değişiklikler yaparak SCSS’i geliştirdi. Yani SCSS ile noktalı virgül (;) ve süslü parantez ({}) kullanabiliyoruz. Daha iyi anlaşılması için aynı kod parçasını hem SASS ile hem de SCSS ile göstermek istiyorum. Böylece aralarındaki farkı daha iyi anlayabiliriz.

SCSS kodları

SASS kodları

Gördüğünüz gibi SCSS kodları alışkın olduğumuz Css kodlarına daha yakın.

Son olarak bu kodların Css çıktısını da göstermek istiyorum.

Css Kodları

SASS ile SCSS arasındaki fark bu şekilde.

SASS derslerimizde tamamen SCSS söz dizimini kullanarak kodlarımızı yazacağız. Size de SASS yerine SCSS kullanmanızı öneririm.

Bir diğer fark ise;

SASS dosyalarının uzantısı .sass iken SCSS dosyalarının uzantısı .scss dir.

Son olarak yazımızı özetlersek;

Css kodlarınızı tıpkı bir programlama dili gibi daha hızlı, dinamik ve düzenli bir şekilde yazmak istiyorsanız SCSS kullanmanızı şiddetle tavsiye ederim.

SASS Nedir? ve SCSS Nedir? öğrendiğimize göre Visual Studio Code ile SCSS kodlarını nasıl yazacağımıza ve yazdığımız bu kodları Css kodlarına nasıl dönüştürebileceğimize bakalım.

Bunun için Visual Studio Code da SCSS Kurulumu ve Kullanımı yazımı okuyabilirsiniz.

SASS hakkında daha detaylı bilgi almak için sitesini ziyaret edebilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.