Sass Kurulumu

Sass Ruby ile geliştirildiğinden, kullanabilmek için bilgisayarımıza Ruby kurmamız gerekiyor. Eğer Mac kullanıcısıysanız, OS X ile birlikte Ruby kurulu bir şekilde geliyor.

Kurulum ve kullanım aşamalarında Komut İstemi (Windows için cmd.exe, Linux ve OS X için Terminal) yazılımlarına ihtiyacımız olsa da, bu işleri daha kolay yapmak mümkün. Tüm kurulum ve dosya takibi işlerinizi komut satırından yapmak yerine ücretli veya ücretsiz birçok yazılım kullanabilirsiniz.

Komutlar, kullandığınız işletim sistemine göre değişiklik gösterdiği için, yazı dizisinin bu ve diğer bölümlerinde, işleri komut satırları yerine ücretsiz bir programla halledeceğiz.

Sass kullanabilmek için birçok yazılım mevcuttur. Bu yazılımlara aşağıdaki listen göz atıp sizin için en uygununu seçebilirsiniz. Aşağıdaki liste resmi Sass sitesinin önerdiği yazılımları içermektedir.

Uygulama Adı OS X Linux Windows Bedel Adres
CodeKit     Ücretli http://incident57.com/codekit
Compass.app Ücretli, Açık Kaynak http://compass.handlino.com
Hammer     Ücretli http://hammerformac.com
Koala Açık Kaynak http://koala-app.com
LiveReload   Ücretli, Açık Kaynak http://livereload.com
Mixture   Ücretli http://mixture.io
Prepros Ücretli http://prepros.io
Scout   Açık Kaynak http://mhs.github.io/scout-app

Bu bölümden itibaren, OS X, Linux ve Windows ortamlarında çalışan ve ücretsiz olan Koala uygulamasını kullanarak devam edeceğiz. Web sitesine giderek kullandığımız işletim sistemi için uygun olan dosyayı indirip kuralım. Kurulum aşamaları standart bir program kurulumu gibi kullanıcı arayüzüne sahip olduğu için, bu bölümü geçerek uygulamamızın ayarlarını yapalım.

Uygulamamızı kurup çalıştırdığımızda karşımıza aşağıdaki gibi bir pencere gelecektir.

Sass Dersleri

İlk ekrana çalıştığımız proje dizinini sürükleyip bıraktığımızda, uygulama artık bizim için derlenmesi gereken tüm Sass ve Scss dosyalarındaki değişiklikleri takip edecek, dosya içerikleri her değiştiğinde CSS dosyamızı oluşturacaktır.

Uygulamanın varsayılan ayarlarını, kullanım ihtiyaçlarımıza göre düzenledikten sonra ilk projemize başlayabiliriz. Uygulama içinde, sol üst tarafta bulunan çark simgesine tıklayarak gerekli ayarları yapalım.

Sass Dersleri

Sass Dersleri

İlk önce “General” sekmesinde “Notification when compile is compieted” seçeneğini işaretleyelim. Bu sayede kaydettiğimiz her Sass veya Scss dosyası derlenirken hatalı yazım veya başarılı derleme işlemi gibi bildirimleri alabiliriz.   

İkinci ekrandaki Sass Sekmemizdeki tüm işaretleri kaldırıp “Output Style” seçeneğini “expanded” yapıyoruz. Bu işlemden sonra oluşturulacak CSS dosyamız okunaklı bir şekilde hazırlanıyor. İsterseniz “compressed” seçeneğini işaretleyerek oluşturulan CSS dosyanızı sıkıştırabilirsiniz.

 

Merhaba Dünya

İlk Sass kodumuzu yazarken “Hello World” geleneğini bozmayalım. Yazı dizisi içinde yapacağımız tüm örnekleri hem Sass hem de Scss olarak yazacağız, sizin tercihiniz hangisi ise örnekleri ona göre hazırlayıp çalıştırın.

Ben öncelikle bir HelloWorld klasörü oluşturup içine “sass”, “scss” ve “css” klasörleri oluşturdum. sass klasörü içine sass-style.sass, scss  klasörüne ise scss-style.scss dosyalarını oluşturarak, projemin ana dizinini koala içine sürükledim.

Sass Dersleri

Yukarıdaki resimde de gördüğünüz gibi koala oluşturacağı CSS dosyasının dizinini Sass için ana dizindeki “css”, Scss için yine ana dizindeki scss klasörü olarak ayarladı. Bunun sebebi proje dizinimizde hem Sass hem de Scss dosyalarımızın bulunması. Her iki çalışmanın çıktısının da “css” klasörüne oluşturulmasını sağlamak için Scss’in yanındaki düzenleme ikonuna tıklayarak, dosyamın kaydedilmesini istediğim dizini seçeceğim.

Sass Dersleri

Artık ilk kodumuzu yazmak için önümüzde herhangi bir engel kalmadı. Hemen aşağıdaki kodları yazarak Sass ve Scss dünyasına ilk adımımızı atalım.

SCSS:

$width: 250px;
$color: #f5f5f5;

.container {
	width: $width;
	height: $width;

	.row {
		background-color: $color;

		&:before {
	content: 'Hello World';
}
	}
}

SASS:

$width: 250px
$color: #f5f5f5

.container
	width: $width
	height: $width

	.row
		background-color: $color

		&:before
			content: 'Hello World'

ÇIKTISI:

.container {
	width: 250px;
	height: 250px;
}
.container .row {
	background-color: #f5f5f5;
}
.container .row:before {
	content: 'Hello World';
}

İlk örneğimizi yazıp dosyayı kaydettiğimizde, koala tarafından derleme işleminin başarılı olduğuna dair bir bildirim alıyoruz.

Sass Dersleri

Yukarıdaki örneği buradan indirebilirsiniz.

Bir sonraki yazıda iç içe yazım (nesting) şeklini inceleyeceğiz.