Sass (Syntactically Awesome StyleSheets) -1

Nezih bahçenin en dip köşesinde yemeklerimizi hazırlayan ve servis eden Leyla hanımın özentili hareketleri bir anda aklıma SASS olgusunu düşürdü Neden mi ? Biz yazılımcılar alışa geldiğimiz variable mantığı yani değişkenler ile uygulamalarımızı geliştirirken, CSS ile bu neden yapılamıyor sorusunun"SASS" ile çözümlenmesi, her şeyi daha da profesyonel hale getirmişti.

SASS ne sorusunu dediğinizi duyar gibiyim? SASS aslında maklemin başlığında da belirttiğim gibi mükemmel söz dizilimli stil dizilimleri ya da stil dosyalarını hazırlayan framework. 

CSS yazan arkadaşlarımızın bildiği gibi CSS yazarken bir nesnelin alt elamanlarına ulaşmak ya da tip belirteçleri ile bunları bir birinden ayırmak ya da tanımlanan bir değeri her seferinde farklı yerlerde kullanmak zamanla yazım hızını ve düzenini bozan tarayıcı tarafında da ilgili web sayfaları ya da uygulamaların response yani cevap süresini etkilemektedir. SASS ile yani bu frameworkcük ile işleri dahada kolaylaştırıp daha programatik mantığa sahip stil dosyaları ya da formları hazırlayabiliriz isterseniz lafı fazla uzatmadan örneklendirmeye bakalım.

Öncelikle SCSS dosyaları değimiz ve bilegeldiğimiz CSS dosyalarından farklı yapıya sahip SCSS dosyalarını oluşturabilmemiz için Ruby ile kurulumunu yapmamız gerekli bu konu ile ilgili bilgileri buradan takip edebilirsiniz. 

Bu frameworkun Synatax'ı 2 türlü oluşturulabilir.

SASS: Noktalı virgül ya da süslü parentez kullanmadan istediğimiz gibi yazabiliriz.
SCSS: Bildiğimiz CSS söz dizilimi gibi kullanabiliriz.

Bu framework ile çalışırken değişkenler $ işareti ile tanımlanır.

SAAS Syntax

$fontType: Helvetica, Arial

$fontSize:10px

$urunGenelPasayici:border:1px solid #efe

$urunH2Color:#ffff00

body 

       font-size:$fontSize

       font-family:$fontType

SCSS Syntax

$fontType: Helvetica, Arial;

$fontSize:10px;

$urunGenelPasayici:border:1px solid #efe;

$urunH2:#ffff00

body 

{

       font-size:$fontSize

       font-family:$fontType

}

Genişletme 

SASS Syntax

ul

     margin:0px

     padding:0px

      li

         display:inline-block

          div

              border:1px solid #eee          

                 a

                     text-decoration:none

                     color:red

SCSS Syntax                 

ul                     {

     margin:0px;

     padding:0px;

                        }

      li                }

         display:inline-block;

                        }

          div         {

              border:1px solid #eee;

                        }

                 a     {

                     text-decoration:none;

                     color:red;

                        }

Yukarıda anlatmaya çalıştığım örneklemede iki söz dizilimi arasındaki farkları belirttim yalnız SASS'ın bize sağladığı  yetenekler bu kadarla sınırlı değil ayrıca Visual studio 2013 RC2 de SASS için ayrı bir motor sunulacağı geçtiğimiz günlerde belirtildi. 

Bir sonraki makalemde SASS ile gelen 

• Partial (bölümlü ya da parçalı)
• Import(dahil etme)
• Mixins(Eklemler, Katmalar)
• Inheritance(Miras Alma)
• Operators(Öperatorler)

Konusunu işleyeceğiz.

Saygı ve Sevgilerimle

Rahmi Tuğrul Altın