Kaptanın seyir defteri

Sonsuzdöngü'deki stajımı bir blog yazızı ile süslemeye kararı verdim. Konu blog yazısı olunca SASS cazip bir konu geldi. SASS'a giriş ve temel bir kaç özelliğinden bahsedeceğim.

SASS, CSS yazarken işlerimizi kolaylaştıran teknolojilerden bir tanesi. Genelde SASS denince akla LESS gelir. Aynı işi yapan ve birbirine çok benzeyen bu iki teknoloji arasındaki fazla fark yok fakat yine de http://css-tricks.com/SASS-vs-less/ adresine bir gözatın derim. (Not: winner kısmı sürekli update ediliyor.)

Sass normalde CSS yazarken kullanamadığımız özellikleri bize sağlıyor. Genel olarak css yazarken vaktimizi alan noktalara Sass çözüm getiriyor. Prefixleri bir property için her kullanımda tekrarlamak yerine bir kez tanımlamak vakitten kazandırıyor. Birazdan bahsedeceğim değişkenler ile projedeki en çok kullanılan renk kodlarını isimlendirebiliriz ve bir rengi tek seferde değiştirebiliriz.

Yukarıda bahsettiğim gibi Sass sayesinde değişken tanımlayabiliyoruz böylece projedeki belli başlı renk kodlarımızı kendi değişken isimlerimiz ile kullanabiliyoruz. Herhangi bir renk kodu değişiminde tek yerden kolayca değiştirebiliyoruz. İç içe yazım şekli sayesinde tekrar tekrar selector isimleri yazmıyoruz. Mixins ile prefixleri tekrar tekrar yazmak yerine sadece bir kez tanımlıyoruz ve gerektiği yerden include ile çağırarak değerimizi giriyoruz. Değişken tanımlama, iç içe yazım tarzı, extend miras alma diyebiliriz ve son olarak mixin bu maddeleri birazdan başlık başlık inceleyeceğiz.

SASS'ı bilgisayarınızda bulunan işletim sistemine göre değişik şekillerde kurabilirsiniz. http://sass-lang.com/install adresinde farklı platformlar için kurulum yönergeleri bulunmaktadır.

SASS yazarken karşınıza iki adet dosya uzantısı gelecektir. Bir .scss bir de .sass. İkisi arasındaki fark yazım tarzıdır. Siz tamamen alışkanlık ve arzunuza göre yazabilirsiniz. Ayrıca komut satırından uzantıları birbirine convert edebiliyorsunuz.

# Convert SASS to SCSS
$ sass-convert style.SASS style.scss

# Convert SCSS to SASS
$ sass-convert style.scss style.SASS 

Ayrıca yazdığınız style.scss dosyanızın css çıktısını alabilmek için komut satırından;

sass --watch /dosyayolu/style.scss

komutunu çalıştırmanız yeterli. Bu şekilde build ettiğinizde nested tipinde çıktı alırsınız.

Diğer çıktı tipleri compact, compressed ve expanded'dır. Çıktı tipini değiştirmek için;

sass --watch style.scss:style.css --style expanded

yani --style çıktıtipi komutunu eklemeniz yeterlidir.

Eğer http://sass-lang.com/ adresine site değiştirilmeden önce girseydiniz karşınızda 4 madde görecektiniz. Bunlar yukarıda da sıraladığımız en temel maddeler; Nesting, Variables, Mixin'ler, Extend.

Nesting

Nesting ile iç içe bir yazım şekli elde edebiliyoruz.Bu sayede tekrar tekrar selector isimleri yazmaktan kurtuluyorsunuz. Örneğin:

CSS:

ul{}
ul li {}
ul li a{}

SASS:

ul {
    li{
        a{}
    }
}

şeklinde yazabilirsiniz.

Değişken tanımlama

Variables değişken tanımlamamızı sağlıyor. Bir projedeki herhangi bir rengi sadece tek seferde değişken tanımından kolayca değiştirebiliyoruz. Örnekleyecek olursak;

$my-color: #C61C6F;
body {
    color: $my-color;
}

Mixin'ler

Mixin'ler bize değer döndürüyor. Genelde prefixlerle karşımıza çıkan mixin için güzel bir mixin library var Bourbon adında http://www.sametaydemir.com/bourbon-sass-mixin-kutuphanesi/ linkinde Samet Aydemir’in yazısında detaylarını bulabilirsiniz. Mixinler ile prefixleri tekrar tekrar yazmak yerine bir kere tanımladıktan değerleri girip prefixlerle tanımlamayı sağlayabiliyoruz.

Mixin örneği verecek olursak;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}
.box { @include border-radius(10px); }

Son olarak Extend adında da anlaşılacağı üzere örneğin bir class özelliğini diğer bir classta tekrar tekrar tanımlamak yerine extend ile class ismini yazıyoruz ardından farklılaşmasını istediğimiz özellikleri belirliyoruz. Böylece aynı özellikleri tekrar eden birden fazla class yazmak zorunda kalmıyoruz onu çokluyoruz.

Örnek olarak;

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

Sass'a basic bir giriş yapmış sayılırsınız. Daha fazlası için http://sass-lang.com/ adresini ziyaret edebilirsiniz. Ayrıca kurulum yapmadan deneyeyim bir diyorsanız http://sassmeister.com linkine göz atabilirsiniz.