SASS ve SCSS Nedir? Nasıl Kullanılır

Merhaba arkadaşlar, bu yazımda size bir CSS framework’ü olan SASS ve SCSS nedir nasıl kullanılır bunlardan bahsedeceğim. Sass ve Scss dinamik bir css yazmamızı ayrıca sabit snytax kurallarının dışına çıkıp daha özgün kod tekrarı olmadan kod yazmamızı sağlayan bir framework’tür.

SASS Kurulumu

Sass’ı kullanabilmemiz için Windows tarafında Ruby Installer kurmamız gerekmektedir. Ruby kurduktan sonra başlat kısmına Ruby yazalım ve en üstte çıkan Start Command Prompt with Ruby programına tıklayarak açalım bir dahaki sefere daha rahat ulaşmak için masaüstüne atabiliriz.

Program açıldıktan sonra komut satırı (command line) ekranı gelecektir bu ekrana şu komutları yazalım:

gem install sass

SASS Kurulum Ekranı

Sass’ın kurulumu bittiginde kurulduğundan emin olmak için şu komutu yazalım:

sass -v

Eğer Sass’ın versiyon bilgileri ekranda yazıyor ise Sass başarılı bir şekilde bilgisayarımıza kuruldu demektir.

Sass’ı kurduğumuza göre artık bir sass uygun kod yazıp onu derlemeyi ögrenmek. Masaüstümüzde bir dosya açalım dosyanın ismi css olsun dosyanın içerisine birde style.scss sayfası oluşturalım daha sonra herhangi bir editör ile ben Phpstorm kullanıyorum dosyayı açalım içerisine şu kodu yazalım:

.container{
	.image{
		background-color:#000;
	}
}

Kodumuzu yazıp kaydettikten sonra ruby programına gelelim.

cd Desktop 

Yazarak masaüstü dizinimize erişelim daha sonra oluşturdugumuz dosyaya girelim

cd css

Şuan masaüstünde css dizinindeyiz komut satırına aşağıdaki komutları girerek scss sayfamızı web tarayıcıların anlayacağı dile yani klasik css çevirelim style.scss sayfamızı ne zaman kaydedersek sass otomatik bir nevi derleyecektir.

sass –watch style.scss:style.css

CSS dosyamıza bakacak olursak style.css ve style.css.map sayfalarımızın oluştugunu göreceksiniz.

Style.css sayfamızın içini açarak style.scss yazdığımız kodu klasik css çevrildiğini görecegiz.

Kısaca kodlara bakacak olursak:

style.scss

.container{
	.image{
		background-color:#000;
	}
}

style.css

.container .image {
  background-color: #000; }

SASS’ın bize sunduğu güzellikleri sıralayacak olursak;

  • Kod tekrarını engeller
  • İç içe yazım sayesinde anlaşılır kod
  • Dinamik bir css yapısı

SASS ve SCSS Farkı ?

SASS ile yazılmış bir örnek:

.container  
    .image  
        background-color: #000

SCSS ile yazılmış bir örnek

.container{
	.image{
		background-color:#000;
	}
}

Aradaki fark SASS tamamen yazım kullarını silip noktalı virgül yazmadan parantezler açmadan free bir yazım şekli sunarken SCSS ise klasik yazım kurallarına uymaktadır.

Sass’ın diğer bize sunduğu bir sürü yenilikleri diğer makalelerde ele alacağız bu makale de nasıl kurulur ne işe yarar bundan bahsettik diğer makalede dinamik kod yapısından bahsedeceğim bir sonraki makalede görüşmek üzere.

4 Comments

  1. sass dosyasını nasıl çalıştıracağız scss oluyor ama sass’ı bir türlü derleyemedim yardımcı olurmusunuz ?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: