SASS ile css önişlemcilerine giriş yapıyoruz

SASS ile css önişlemcilerine giriş yapıyoruz
74

Sass hakkında yazılar yazmak istiyorum ama sürekli makalelerimin başında sass hakkında bilgi vermek yerine ilk olarak sass’a giriş niteliğinde bir yazı yazmanın daha yararlı olacağını düşündüm. Yazımda popüler css önişlemcilerinden, sass kurulumundan, sass ve scss farklılığından, sass ve scss ile yazılan söz dizimlerini css’e çevirmekten bahsettim.

Popüler css önişlemcileri

Günümüzde 3 adet popüler css önişlemcisi bulunmaktadır. Bunlar SASS, LESS ve Stylus’dur.

Neden css önişlemcilerini kullanmalıyım?

CSS ile kod yazarken ne kadar dikkatli olunsada büyük projelerde mecburen binlerce kod satırı ortaya çıkabiliyor. İşte burada dinamik css yazımı devreye girerek kod tekrarını minimize etme olanağını bize sunuyor. Örneğin projenizde renk değişimine gitmeniz bile bazen eziyete dönüşebiliyorken  css önişlemleri sayesinde birkaç saniyelik iş halini alabiliyor.

Sass Kurulumu

Sass ruby ile geliştirildiğinden dolayı bilgisayarımıza ruby kurmamız gerekmekte. Eğer Mac OS kullanıcısıysanız zaten ruby kuruludur.

Windows Kurulum Linux Kurulum

Ruby kurulumunu yaptıktan sonra komut satırına (Start Command Prompt with Ruby) şağıdaki kodu girmeniz gerekiyor.

gem install sass

Linux ve Mac Os’ta yetki sorunlarını aşmak için

sudo gem install sass

Yukarıdaki işlemi yaptıktan sonra kurulum tamamlanmış oluyor. Kurulumun tamamlanıp tamamlandığını öğrenemek için komut satırına aşağıdaki kodu girin örn Sass 3.4.18 şeklinde bir cevap gelirse Sass bilgisayarımıza yüklüdür.

sass -v

Sass Kullanımı

Sass, Sass ve SCSS diye ikiye ayrılır ilk olarak ikisi arasındaki farkı basit bir örnek ile göstereyim.

Sass

$font-stack: Helvetica, sans-serif
 $primary-color: #333
body
 font: 100% $font-stack
 color: $primary-color

SCSS

$font-stack: Helvetica, sans-serif;
 $primary-color: #333;
body {
 font: 100% $font-stack;
 color: $primary-color;
 }

Farkettiğiniz üzere söz dizimleerine baktığımzıda SASS  ile hiçbir şekilde – {} – süslü parantez ve ; – noktalı virgül işaretlerini kullanmadık.

[bilgi]Farklılıklara daha detaylı göz atmak için tıklayın.[/bilgi]

Şimdi sass ve scss ile yazdığımız bu kodları css’e çevirelim.

Örnek olarak test.scss dosyası oluşturalım ve yukarıdaki örnek scss kodlarını içine yapıştırıp kaydedelim.

Daha sonra (Start Command Prompt with Ruby) komut programını açarak komut satırına hangi işlemi yapmak istiyorsanız onu girelim.

SASS dosyasını SCSS’ye çevirmek için

sass-convert demo.sass demo.scss

SCSS dosyasını SASS’a çevirmek için

sass-convert demo3.scss demo3.sass

SCSS dosyasını derleyip CSS olarak çevirmek için

sass demo1.scss demo2.css

Yukarıdaki kodlar değişiklikleri algılamıyor değişiklikleri algılaması için;

SCSS dosyasına watcher ekleyip her güncelleme olduğunda CSS olarak çevirmek için

sass --watch input.scss input.css

SASS klasöründekileri Style Klasörüne çevirmek için;

sass --watch sass:style

sassders

[bilgi]Diğer komut kodlarına göz atmak için tıklayın.[/bilgi]

Çıktı Özellikleri

Tüm css’ciler farklı yazım stilleri mevcuttur. Sass’ında bazı çıktı özellikleri mevcut bunlar :nested, :expanded, :compact ve :compressed ‘dir.

Örneğin :nested (standart) şu şekilde çıktı verir.

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed
Compressed sıkıştırarak çıktı verir.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Çıktı kullanımları

sass --watch sass:styles --style compact

# veya

sass --watch sass:styles --style expanded

#veya

sass --watch sass:styles --style compressed

Yorum Yap

Yapılan Yorum (1)

  1. teşekkürler