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.
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
