SASS nedir? Neden Kullanmalıyım?
İçindekiler
Son kullanıcı için hiç bitmeden ilerleyen teknoloji ve yenilikler biz geliştiriciler için de arkasına bakmadan ilerliyor. Gün geçtikçe yeni programlama dilleri, markup (biçimlendirme) dilleri, frameworkler ve işlerimizi kolaylaştıran birçok yazılım, bir önceki teknolojinin pabuçunu dama atıyor.
Durumlar böyle olunca sektör içinde yer almak için her geçen gün yeni şeyler öğrenmemiz ve sektörde olup bitenleri sıkı takip etmemiz gerekiyor. Bu teknolojiler içinde Sass da bunlardan bir tanesidir.
Sass 2006 yılında Hampton Catlin tarafından, CSS ve CSS3’ü Ruby diline benzer bir yapıyla geliştirmek fikri ile ortaya çıkan bir Ruby Gem’dir. 2008 yılına kadar Hampton tarafından geliştirilmeye devam eden Sass, şu anda Github üzerinde bulunan repo ile yüzlerce developer tarafından geliştiriliyor.
Sass’in github adresini ziyaret edebilirsiniz.
SASS Nedir?
Syntactically Awesome Style Sheets ifadesinin kısaltması olan SASS, en popüler CSS ön-işlemcilerinden (pre-processing) biridir. Kendi resmi sitesinde ki ifadeye göre olgun,istikrarlı ve güçlü profesyonel seviyedeki CSS uzantı dilidir.
Sass, CSS’i bir programlama diline benzer yapıyla geliştirmemizi sağlayan, sürekli ihtiyaç duyduğumuz ve CSS’te bulunmayan birçok özelliği kullanarak, daha pratik ve okunaklı kod yazmamıza olanak verir.
Uzantı dilinden kasıt stil oluştururken CSS’de olmayan özellikleri kullanabiliyor olmamızdır. Kısaca Sass, CSS ile yaptığımız işleri daha kolay, hızlı ve düzenli hale getiren yardımcı bir araçtır.
Sass fikri ilk doğduğunda sözdizimi Ruby gibi planlanmıştı, kullanım oranı arttıkça front-end geliştiricilerin CSS’ten gelen el alışkanlığı göz önünde bulundurularak, sözdizimi değişti ve Scss olarak yeniden şekillendi.
SASS özellikleri nelerdir?
Sass genel olarak css derleyicisidir. Css sayesinde var olmuş fakat css’i teknik olarak geçmeyi başarmıştır.
Sass, kendi sözdizimi ile yazılmış kodları CSS’e çevirir. Sass tarafından oluşturulan bu CSS dosyası projeye dahil edilerek kullanılır. Sass compile edilen diller gibi ekstra bir derleme komutu beklemez, çalıştığınız proje dizinini takip ederek, kaydedilen her “*.sass” ve “*.scss” dosyasını otomatik olarak saniyeler içinde derler ve kullanıma hazırlar.
Sass ile CSS yazarken; değişken tanımlanılabilinen hali (variables), döngüler (for, each, while), karar yapıları (if, else), tarayıcılar için yazdığımız ekstra kodları kendisi oluşturabilen hali(function, mixin), girintileri fark ederek iç içe class’ları yazabilen hali (nesting), dosyasında istediğimiz kodları istediğimiz yerde extend edebiliyoruz (extend/inheritance), dosyamızı parçalara ayırıp, ayırdığımız kısımları istediğimiz yerde çağırabiliyoruz (import), dosyamızda çarpma,bölme toplama vs. yapabiliyorz. (operators), miras seçiciler (selector inheritance) veya diğer adıyla seçici kalıtımı kullanabilirsiniz.
Neden SASS Kullanmalıyım?
CSS’i daha elverişli hale getirir. Sass, programalama dillerinin sahip olduğu bazı özellikleri (değişkenler,fonksiyonlar), CSS de kullanabilmemizi sağlıyor ve bir nevi CSS’i basit bir dilden programlama diline çevirir.
Binlerce satırlık CSS kodlarını daha hızlı yazmamızı, daha düzenli bir stil dosyası oluşturmamıza olanak tanır. Bu şekilde daha önce yazdığımız kodları kolay bir şekilde bulabiliriz.
Kısacası CSS’i hantal bir yapıdan çıkarır ve daha dinamik bir yapıya döndürür. Sass’ın faydalarını esas olarak büyük projelerde farkedersiniz.
SASS Alternatifleri
CSS ön-işlemcisi tabi ki Sass’dan ibaret değil. En az Sass kadar popüler ve kullanıcısı olan bir de Less var. Ayrıca Stylus adında diğerlerine göre daha az popüler ama yeterli bir ön-işlemci daha var.
Kaynaklar
http://sass-lang.com
5 Yorumlar
sass dilinde {} ve ; kullanılıyor. stylus’da yok.
Mehmet Köse ilginiz için teşekkür ederim. Dikkatimizden kaçmış düzeltildi.
iyi günler, mac için sass kurulumu yapmaya çalışıyorum.Konsol’dan sudo gem install -n /usr/local/bin sass ile kurulum yaptım ancak atom ile nasıl kullanım yapabilirim ?
Merhabalar, MAC kullanmadığımdan SASS kurulumunu hiç MAC’te yapmadım. Bu konda çok yardımcı olamasam da yardımcı olabilicek bir lik paylaşmak isterim.
Bilgi için teşekkür ederim. Front-End’e yönelmiş biri olarak bunları da öğrenmek gerekiyor.