Sass Nedir? | Nasıl Kullanılır?

Sass, bir  CSS ön-işlemcisidir.CSS’de olmayan değişken tanımlama, metodlar, nesting gibi özellikleri sağlayarak CSS’i daha hızlı ve elverişli bir dile dönüştürür.

Sass nedir nasıl kullanılır .scss formatı nedir

Scss 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.

Uzantı dili diye bahsedilmesinin nedeni CSS dilini ile aynı olup, sadece CSS’i daha kolaylaştırmak için ek özelliklerinin olmasıdı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.

Neden Sass Kullanmalıyım?

Tanımını yaparken de açıkladığım gibi CSS’i daha elverişli hale getirir.Sass, programlama dillerinin sahip olduğu bazı özellikleri (değişkenler, fonksiyonlar, direktifler) CSS de kullanabilmemizi sağlıyor.Bir bakıma 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önüştürür.Sass’ın faydalarını esas olarak büyük projelerde fark edebiliriz.

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.Sitesine girip göz atabilirsiniz.

Ayrıca Stylus adında diğerlerine göre daha az popüler ama yeterli bir ön-işlemci daha var.

Sass Çalışma Mantığı

Sass çalışma mantığı en basit ifade ile; CSS kodlarını, normalde .css uzantılı dosyaya yazarken, Sass ile çalışırken .scss uzantılı dosyaya  yazıyoruz.Burada bir problem yok.

Fakat HTML dosyamıza stil dosyamızı tanımlarken, .scss uzantılı Sass dosyasını tanımlayamayız.Stil dosyamız mutlaka .css uzantılı olmalıdır.

E o zaman CSS kodlarını .scss uzantılı dosyanın içerisine yazdık, onu nasıl .css uzantılı yapacağız.İşte bu işleme derleme işlemi deniyor.

Yani Sass ile çalıştıktan sonra onu kullanır hale getirmek için CSS dosyasına derlememiz gerekiyor.Derleme işlemi için bir kaç alternatif var.

Bu derleme işlemini gerçekleştirmek için bir kaç yöntem bulunuyor.

1- SassMeiter gibi bazı tarayıcı uygulamaları ile bu işlemi kolayca gerçekleştirebilirsiniz.Siteye girince karışınıza ikiye ayrılmış bir ekran çıkar.Sol tarafta Sass kısmı sağ tarafta CSS kısmı vardır.Sass kodlarını yazdığınız anda uygulama hemen CSS derlemesini yapar.Sizin yapacağınız tek şey CSS tarafındaki derlenmiş kodları alıp stil dosyanıza kaydetmektir.

2- Codekit, Koalo, Perpros gibi 3. parti yazılımlar ile bu derleme işlemi yapabilirsiniz.Bu masaüstü uygulamaları da yukarıdaki tarayıcı uygulaması gibi çalışır.

3- Diğerlerine göre biraz zahmetli olan bu yöntem de 3. parti uygulamalara ihtiyaç duymadan, Sass’ı bilgisayarınıza yükleyip, derleme işini consolda (command line) elle yapmanız gerekmektedir.Bilgayarınıza Sass kurulumunu aşağıda anlattım.

Fakat oraya geçmeden önce bir şeyden bahsetmek istiyorum.

.sass ve .scss formatları nedir

Eğer Sass’ın kendi sitesine girerseniz, örneklerde .scss ve .sass şeklinde iki farklı kullanımın olduğunu görürsünüz.Bu iki yöntem de aslında aynı şeydir.

SASS’ın ilk versiyonu .sass formatıydı ve süslü parantezler, noktalı virgüller ve bazı direktifler (mixin, import vs.) farklı şekilde yazılıyordu.Daha sonra yeni düzenlemler ve kolaylıklar ile .scss formatı oluşturuldu.

Eski yöntem bazıları için hala kolay geldiği için kullananlar var.Ama Sass uzun zamandır ikinci nesil .scss formatını kullanıyor ve destekliyor.Bu sebeple Sass derslerinde .scss formatı anlatılacak.

SASS Kurulumu Nasıl Yapılır?

Artık Sass’ın ne olduğunu, neden kullanmamız gerektiğini öğrendiğimize göre nasıl kuracağımızı öğrenelim.Kurulumu oldukça basit.Ağırlıklı olarak Windows kullanıcıları olduğu için windows kurulumundan bahsedeceğim.

Sass’ı sisteminizde çalıştırabilmek için Ruby’e ihtiyacımız var.Eğer sisteminizde Ruby yoksa Ruby Installer sitesinden indirip kurun.Kurulum işlemi klasik next next olduğu için anlatmaya gerek yok.

Daha sonra command line penceresini açıyoruz.Bunun için windows tuşu + r tuşuna basın, çıkan ‘çalıştır’ ekranında cmd yazın.Windows console ekranı açılacaktır.

İlk olarak Ruby’i doğru kurdunuz mu test edelim.Aşağıdaki komutu yazıp entere basın.

ruby -v

Bu komut, yükleme doğru gerçekleşti ise Ruby’nin versiyonunu ekrana çıkarakcaktır.Bir de Ruby paket yöneticisini kontrol edelim.Siz Ruby’i yüklediğiniz de gem paket yöneticisi de otomatik olarak yükleniyor.

gem -v

Gem versiyonunu da ekranda gördük.Artık her şey hazır Sass kurulumuna geçelim.Ruby, Sass gibi paketleri yönetmek için gem adında paket yönetimi kullanılır.Bu yüzden console ekranında aşağıdaki komutu yazın.

gem install sass

Bu komut ile bir hata almadığınız sürece Sass’ı sistemize kurmuş olacaksınız.Kontrol etmek için aşağıdaki komutu console yazalım.

sass -v

Eğer bir hata ile karşılaşmaz iseniz ekrana Sass versiyonu gelecek.İşte bu kadar.

Sass Kullanımı

Sistemimize SASS kurulumunu gerçekleştirdiğimize göre bir deneme ile elle nasıl derleme işlemi yapacağımızı öğrenelim.Masaüstüne bir adet ‘deneme’ adında bir klasör oluşturalım.Klasörün içerisine girip style.scss uzantılı bir Sass dosyası oluşturalım.İçerisine şimdilik sadece şu kodu yazıp kaydedelim.

$krenk : #ff0000;
p { color: $krenk;}

Daha sonra consol(command line) ekranını açıp bu klasörün içerisine girelim.Masaüstünde konsol açtığınızda konsol ekranına cd Desktop\deneme yazarsanız klasörün içerisine girmiş olursunuz.

Sass derleme yapmak için bize watch isminde bir komut sunar.Sass komutlarının tamamını görmek için sass -h yazıp entere basabilirsiniz.

Watch komutu ile Sass’a bu .scss dosyamızı izlemesini ve değişiklik olduğunda .css dosyasına derlemesini istiyoruz.Komutumuz şu

sass --watch style.scss:style.css

Komutu yazıp entere bastığımızda klasör içerisinde style.css adında bir dosya oluştuğunu ve dosyanın içerisinde p { color: #ff00000;} yazdığını görebilirsiniz.

Şimdi .scss uzantılı dosyanın içerisinde bazı değişlikler yapalım.Aşağıdaki kodu ekleyelim.

$krenk: #ff0000;
$yazistil: 'Open Sans',sans-serif;

p {
color: $krenk;
font-family: $yazistil;
}

Değişikliği yaptıktan sonra kaydedelim.Consol ekranında değişiklik olacak ve .css uzantılı dosyaya girerseniz, yeni yazdığımız kodların oraya eklendiğini göreceksiniz.İşte kısa bir şekli ile Sass kullanımı bu şekildedir.

Sass giriş niteliğindeki bu dersimiz de, sass nedir, ne işe yarar, nasıl kurulur ve kullanılır gibi sorulara cevap aradık.Bahsettiğim bütün konulara detaylı olarak değinmeye çalıştım.Sass ile ilk tanışma dersimiz bu kadar.Sonraki derslerde Sass’ın faydalı özelliklerini anlatmaya başlayacağım.Bir sonraki ders Sass ile değişken oluşturma hakkında olacak.

Bunları da beğenebilirsin