Kitap olarak hazırladığım Sass eğitiminin, tekrar üzerinden geçerek, blogum üzerinde bir yazı dizisi oluşturmanın en mantıklı seçim olacağından dün yazdığım blog yazısı ile bahsetmiştim. Yazı dizisinin ilk bölümünü hazırladım ve günde 1 makale olarak yayınlamayı düşünüyorum. Keyifli okumalar.

Genel Bakış

Son kullanıcı için hiç bitmeden ilerleyen teknoloji ve yenilikler biz geliştiriciler için de yerinde saymıyor. 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 ürünü geride bırakıp tabağımıza konuyor.

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

Asıl adıyla Sass  de bunlardan birisi. 

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

Derleme (compile) sırasında  oluşturulan CSS dosyasını isterseniz otomatik olarak sıkıştırabilir veya daha önceden sıkıştırılmış bir CSS kodunu tekrar derleyerek okunabilir bir hale getirebilirsiniz.

Github : https://github.com/sass/sass

Sass Site : http://sass-lang.com/

 

SASS Nedir?

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.

Sass ile CSS yazarken; değişkenler (variables), döngüler (for, each, while), karar yapıları (if, else), fonksiyonlar (function, mixin), içe içe (nesting) seçici kullanımı, miras seçiciler (selector inheritance) veya diğer adıyla seçici kalıtımı kullanabilirsiniz.

Sass kullanırken CSS’te olduğu gibi noktalı virgül “;” ve süslü parantez “{}” kullanamıyoruz. 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.

Şu an Sass geliştiricileri varsayılan sözdiziminin Scss olduğunu fakat Sass sözdizimine de destek vermeye devam edeceklerini söylüyorlar.

 

SCSS Nedir?

Scss yazarken CSS’ten alışık olduğumuz şekilde “;” ve “{}” gibi karakterleri kullanabiliyoruz.

Scss, geliştiricilerin el alışkanlığını bozmamak adına Sass içine inşa edilmiştir. Sass yazarken dosya uzantımız (*.sass), Scss yazarken de dosya uzantımız (*.scss) olmalıdır. Scss ve Sass’ın tüm özellikleri birbiriyle aynı, yalnızca syntax (söz dizimi) farklıdır.

Standartlara uygun olarak yazılmış her CSS kodu Sass tarafından derlenebilir. 

 

Syntax – Söz Dizimi

Sass ve Scss sözdizimleri birbirinden farklıdır. Kendi araştırmalarımda gördüğüm kadarı ile geliştiriciler daha çok Scss tercih etmekte ve CSS’ten gelen el alışkanlıklarını terk etmemektedir. Ben de kendi iş hayatımda ve kişisel projelerimde genelde Scss kullanıyorum, fakat yazı dizisi içinde geliştireceğimiz tüm örnekleri hem Sass hem de Scss olarak yazacağız. Ama size tavsiyem projelerinizde Scss sözdizimini kullanmanız, çünkü şu an için Sass varsayılan sözdizimi Scss’dir.

Birbirine çok benzeyen, sadece birkaç küçük değişiklik içeren, iki farklı yazım tekniğinden hangisini kullanacağınıza kendiniz karar verebilirsiniz.

Piyasada popüler olarak kullanılan birçok kod editörü varsayılan olarak, kod tamamlama açısından, özellikle “{“, “}” ve “;” karakterleriyle Scss kullanımına daha yatkın. Tabi bu varsayılan ayarları değiştirmek birçok kod editöründe mümkündür.

Basit bir örnekle Sass ve Scss yazalım ve çıktısını görelim.

SCSS:

.container {
	width: 250px;
	height: 250px;

	.row {
		background-color: #f5f5f5;
	}
}

 

SASS:

.container
	width: 250px
	height: 250px

	.row
		background-color: #f5f5f5

 

ÇIKTI:

.container {
  width: 250px;
  height: 250px;
}
.container .row {
  background-color: #f5f5f5;
}

Bir sonraki bölümde Sass kurulumundan bahsedeceğim.