SASS ve SCSS – 2023

Programlama Dili Nedir?

Programlama dilleri, bir bilgisayarın yapmasını istediğimiz işlemleri ifade etmek için kullanılan bir dildir. Bunlar, insanlar tarafından okunabilecek ve anlaşılabilir şekilde tasarlandıkları için, bilgisayarlar tarafından anlaşılması için derlenmelidir. Derlenen kod, bilgisayar tarafından yapılması istenen işlemleri yerine getirmek için kullanılır.

Programlama dilleri, farklı amaçlar için tasarlandıklarından, birçok farklı programlama dili bulunmaktadır. Örneğin, web uygulamaları için JavaScript, masaüstü uygulamaları için C++ veya Python, veri analitik için R veya Python gibi. Her programlama dili, farklı özelliklere sahiptir ve farklı amaçlar için en uygun olanını seçmek, programlama projelerinin başarısının anahtarıdır.

Programlama dilleri, zamanla gelişti ve bugün kullanılan dillere göre çok daha gelişmiş ve kullanışlı hale geldi. Bu dillere, kolay okunabilirlik, yapısal yazım ve gelişmiş özellikler gibi özellikler eklenmiştir. Bunun yanı sıra, programlama dilleri arasında uyumlu olma özelliği de bulunmaktadır. Bu, aynı programın farklı programlama dilleri kullanarak yazılmasına olanak tanır ve kod paylaşımı ve kolaborasyonunu kolaylaştırır.

Programlama dillerinin kullanımı, birçok farklı endüstri ve alanda kritik bir rol oynamaktadır. Örneğin, e-ticaret, finans, sağlık, eğitim ve hizmet sektörlerinde programlama dilleri kullanılmaktadır. Programlama dilleri, verilerin analizi, web uygulamalarının geliştirilmesi, masaüstü uygulamalarının yapılması ve oyun geliştirme gibi birçok farklı uygulamada kullanılır.

SASS ve SCSS Nedir?

SASS’ın açılımı olan Syntactically Awesome Stylesheets’in türkçeye anlamı Sözdizimsel Müthiş Stil Sayfalardır. Ne kadar mantıklı ve anlamlı bir çeviri olmasa da bu anlama gelmektedir. SASS kavramı CSS’in programlama diline dönüştürülmüş versiyonu olarak ifade edebiliriz. 

Sass (Syntactically Awesome Style Sheets), CSS’in gelişmiş bir versiyonudur. Sass, CSS’in sınırlarını genişleterek, daha verimli ve okunabilir kod yazmanıza olanak tanır. Sass, CSS dosyalarının preprocessor olarak çalışmasını sağlar ve çıktı olarak CSS dosyası oluşturur.

Sass, özellikle CSS’in tekrar eden ve uzun kodlarını yönetmek için zordur. Sass, bu sorunları çözmek için çoklu dosyalar arasında değişkenler, fonksiyonlar, döngüler ve alt dosyalar gibi özelliklere sahiptir. Bu özellikler, Sass kodlarınızı daha okunabilir, düzenli ve düzenli hale getirir ve zamanınızı ve enerjinizi tasarruf etmenize yardımcı olur.

Ayrıca, Sass, CSS’e ek olarak, CSS dizileri, matematiksel işlemler ve koşullu ifadeler gibi ek özellikler sunar. Sass, aynı zamanda, CSS tarafından desteklenmeyen özellikleri, CSS tarafından desteklenen bir şekilde kullanmanıza olanak tanır.

Sass, web geliştiricileri tarafından oldukça popülerdir ve birçok farklı projede kullanılmaktadır. Sass, CSS’in yapabildiği her şeyi yapabilir, ancak daha verimli ve okunabilir kod yazmanıza olanak tanır. Sass, aynı zamanda, büyük ve kompleks projeler için öncelikli olarak tasarlandığından, CSS dosyalarının organize ve düzenli hale getirilmesine yardımcı olur.

Sonuç olarak, Sass, CSS’in gelişmiş bir versiyonudur ve web geliştiricileri tarafından CSS dosyalarının daha verimli ve okunabilir hale getirilmesi için kullanılır. Sass, birçok farklı özelliğe sahiptir ve CSS’in yapabildiği her şeyi yapabilir, ancak daha verimli ve okunabilir kod yazmanıza olanak tanır.

SASS aynı zamanda en yaygın CSS ön işlemcilerindendir yani bu durumu CSS’in programlama dilidir diyebiliriz. Benzer olarak SCSS yazarken de yine “;” ve “{}” gibi karakterleri kullanabiliriz ve SCSS, SASS içerisine oluşturulmuştur yapıdır. 

SCSS Nedir?

SCSS (Sassy CSS), Sass tarzında yazılmış bir CSS preprocessor’udur. SCSS, CSS dosyalarının yapısını aynen koruyarak, Sass tarzında kod yazmanıza olanak tanır. Bu, CSS kodlarınızı daha verimli ve okunabilir hale getirirken, aynı zamanda, mevcut CSS dosyalarınızın bir SCSS dosyasına dönüştürülmesini kolaylaştırır.

SCSS, Sass’a benzer bir syntax (söz dizimi) kullanır ve aynı özelliklere sahiptir. Bunlar arasında değişkenler, fonksiyonlar, döngüler ve alt dosyalar gibi özellikler bulunur. SCSS, aynı zamanda, CSS’in desteklemediği özellikleri, CSS tarafından desteklenen bir şekilde kullanmanıza olanak tanır.

SCSS, Sass’ın daha esnek ve CSS’e daha yakın bir syntax’a sahip olması nedeniyle, Sass’ın popüler olmasından daha popülerdir. Aynı zamanda, CSS tarafından desteklenen her şeyi destekler ve Sass tarzında verimli ve okunabilir kod yazmanıza olanak tanır.

Sonuç olarak, SCSS, Sass tarzında yazılmış bir CSS preprocessor’udur ve CSS dosyalarının daha verimli ve okunabilir hale getirilmesi için kullanılır. SCSS, Sass’a benzer bir syntax kullanır ve aynı özelliklere sahiptir. SCSS, Sass’ın daha esnek ve CSS’e daha yakın bir syntax’a sahip olması nedeniyle, Sass’ın popüler olmasından daha popülerdir ve CSS tarafından desteklenen her şeyi destekler.

SCSS ile SASS’ın kullanım yöntemi aynıdır yani aynı mantıktan ilerleyen yapılardır. Fakat ayrıştıkları bir nokta ise SCSS noktalı virgül ve köşeli parantezlerle yazılmaktadır. SASS ve SCSS yazma işlemlerinde dikkat edilmesi gereken iki önemli nokta vardır. Birincisi, SASS yazılırken dosya uzantısı “*.sass” olması gerekirken, SCSS yazılırken dosya uzantısı “*.scss” olmalıdır ve buna dikkat edilmelidir. Bu iki kavramın bütün özellikleri aynı iken sadece sözdizimi farklılık yaratır.

SASS kavramı Hampton Catlin tarafından 2006 yılında çıkarılarak günümüze kadar çeşitli kişilerce geliştirilip yenilenme sürecini sürdürmektedir. Ruby programlama dilinin paket yapısı örnek alınarak geliştirilen SASS, Ruby programlama diline hakim olanları zorlayacaktır.

CSS kodları bir noktadan sonra tekrar etmeye başlıyor ve bu durum Front-End geliştiricilerini pek hoşnut etmeyecektir. Aynı renk kodunu sürekli kopyalayıp yapıştırmak vb. gibi durumlarla karşı karşıya kalınabilmektedir.

SASS tam da bu noktada kişilerin imdadına yetişerek çıkarılmıştır ve CSS’in ön işlemcisi olarak kabul edilen SASS, programlama dilinde yazılan kodları CSS kodları haline getirmektedir. CSS’te bulunmayan kod yapılarını yeniden yazmamıza yardımcı olan SASS, pratik ve kolay bir şekilde kod yazımına olanak tanır.

SASS kurulumu oldukça pratik, hızlı ve kolaydır. Yoğun çaba ve teknik bir bilgi gerektirmez. Windows işletim sisteminde kurulum yapmak için başlat menüsündeki Ruby kısayollarının bulunduğu klasörden “Start Command Prompt with Ruby” ile komut işlemcisini çalıştırarak kurulumu kısa süre içerisinde yapmış olursunuz. Fakat yazılan CSS dönüştürülmesi için yazılan SASS kodlarının derlenmesi atlanmaması gereken bir unsurdur.

Sass ile CSS yazılırken bazı seçicileri kullanabiliriz. Bu seçiciler şunlardır; Değişkenler , Döngüler, Karar yapıları, Fonksiyonlar , İçe içe seçici ve Miras seçicilerdir.

SASS Yazarken Hangi Özellikler Kullanılır?

• İç İçe Koymak (Nesting): Önemli özelliklerden bir diğeri olan iç içe yapılar oluşmada, CSS yazma işlemini hızlandırıp kolaylık sağlayan ve kod kalabalığını önemli ölçüde azaltan bir özelliktir ve fayda sağlar.

• Değişkenler (Variables): Variables yani değişkenler özelliği, en kullanışlı ve pratik özellik olmasının yanı sıra CSS’de değişken kullanımına da imkan sağlar. Yazılan kodun değişken olduğunu belirtmek için başına $ işareti koymak yeterli olacaktır.

• İçeri Aktarım(Import): Kodun karışık ve kalabalık yapısından kurtulmak için aranılan bir özelliktir. Sağladığı bu avantaj sayesinde oldukça fazla tercih edilmektedir.

• Katmanlar (Mixins): Bu özellik, sürekli aynı unsurları kullanarak yazılan CSS kodlarını tek seferde tanımlayıp, tüm yerlerde tek konum aracılığıyla kullanılmasına imkan sağlar. Fakat önemli bir ayrıntı olarak burada işlem yapılmadığını belirtmemiz gerekir.

• Kalıtım/Miras (Inheritance): Bu özellik, ortak CSS kodlarını bünyesinde tutan faktörleri bir araya toplamak amacıyla kullanılır.

• Operatörler (Operators): Çok kullanışlı ve fayda sağlayan bir özellik olan operatörler, matematik işlemlerini CSS üzerinde yapmamızı sağlar. SASS alanında yapılan bir matematik işlemi CSS alanına sonuçlandırılmış olarak gönderilecektir. Bu bakımdan bakıldığında bu özellik oldukça fazla kolaylık sağlar.

SASS Özellikleri Nelerdir?

CSS programlama dilinin derleyicisi ve toparlayıcısı konumundadır ama CSS’ten teknik açıdan ileridedir.

SASS kendi yazdığı kodları CSS’e çevirerek bir CSS dosyası oluşturulur ve projeye dahil edilip kullanılmaktadır.

Bir web sayfası oluştururken CSS program dilinin içerisinde bulunmayan özellikleri kullanmamıza olanak tanır.

SASS ya da SCSS ile kodlama yaparken site içinde kullanılan menü, tablo ve içerik kısımlarını da tek bir dosya haline dönüştürebiliriz.

SASS aslında bir CSS derleyicisidir diyebiliriz. Yani yazılan kodların derlenmesinde önemli bir işleve sahiptir.

Hızlı, pratik ve kolaylıkla CSS yazılmasına imkan sağlar.

Bu yazımızda SASS Nedir? konusunu detaylı anlattık. Yazılım dilinde ayrı bir öneme sahip olan bu kavramlar programlama dilinde kolaylıklar sağlayarak avantaj oluşturmaktadır.