CSS PreProcessors: SASS Nedir? Ne İşe Yarar?

Herkese merhaba, bu yeni makalemde web uygulamaları geliştirirken front-end işlerinizi hızlandıran ve yazdığınız tasarımları başka projelere daha kolay aktarabilmenizi sağlayan CSS PreProcessor olarak adlandırılan “Önİşlemci” lerden bahsedeceğim. Öğrenmesi ve kullanımı oldukça kolay olan bu biçim dilleri yeni nesil websiteleri geliştirirken işinize yarayacak. Üstelik visual studio için eklentileri de bulunmakta. Bu adresten online olarak da dönüştürme işlemi yapabilirsiniz. CSS Preprocessor biçim dilleri aslında programlama dilleri kadar karmaşık değillerdir ve gerçek manada derleme işlemi (compiling) yapmaz dönüştürme işlemi (transpiling) yaparlar ve kendine ait sözdizimlerini CSS sözdizimine dönüştürürler dolayısıyla tarayıcılar için değişen bir şey yoktur. Dosya uzantıları .scss dir ve .css dosya türüne dönüşürler

Neden Önİşlemci kullanmalıyız? 

CSS (Cascading Style Sheets) bilindiği üzere statik bir tasarım dilidir değişken, kontrol yapıları, döngüler vs. kullanımına imkan vermez bu sebeple kod tekrarlarından kurtulmak, parametreli fonksiyonlar kullanmak, kodları parçalarına ayırmak, matematiksel işlemler, hazır fonksiyonlar gibi özellikleri yazılımcılara sunamaz. Bu yapıların eksikliği küçük çaplı projelerde çok farkedilmez fakat büyük bir proje geliştiriyorsanız CSS kodunuz zamanla yönetilemez hale gelir. İşte tüm bu sebeplerden dolayı SASS, LESS, Compass, Stylus gibi Css önişleyicileri geliştirilmiştir. Siz sordunuz mu bilmem ama benim bu konuda ilk sorduğum soru “Neden CSS geliştirilmedi de bu önişleyiciler geliştirildi ? ” olmuştu cevabını hala kesin olarak bilmesem de araştırlamalarım sonucu aldığım cevap CSS’in geliştirilmesinin daha uzun sürdüğü oldu. (tahminen geliştirici ekiple ilgili).

Bu makalenin konusu olan SASS ilk olarak 2006 yılında Hampton Catlin tarafından tasarlanmış ve Natalie Weizenbaum tarafından kodlanmıştır. İki kullanım türü vardır; Girintili (SASS) ve Süslü parantezli (SCSS) biz bu makalede CSS sözdizimine daha yakın olan süslü parantezli türünü kullanacağız. SASS’ın en iyi özelliklerini sıralamak gerekirse; Nested Rules (içiçe kurallar), Nested Properties (içiçe özellikler), Variables (değişkenler), Extend (genişleme) ve Mixin (karıştırma) sayılabilir

Nested Rules (içiçe kurallar)

CSS’in genel sözdizimi aşağıdaki gibidir.

selector {
   property: value
}

Görüldüğü gibi her seferinde bir selector (seçici) ve buna bağlı süslü parantezler içine sadece o selector için değerler girilir bu durum bazı durumlarda çok fazla benzer işlem yapmanıza sebep olur bunun yerine sass ile içiçe selector kullanarak işlemlerinizi kısaltabilirsiniz

#main p {
  color: #00ff00;
  width: 97%;

  .content {
    background-color: #ff0000;
    color: #000000;
  }
}

Sonuç

#main p {
  color: #00ff00;
  width: 97%; 
}
  #main p .content {
    background-color: #ff0000;
    color: #000000; 
}

Referencing Parent Selectors (üst seçicileri referans almak)

Her seçinin alt özelliklerini (hover, focus, active, visible), tanımlamak için ayrı selector’ler yerine & operatörü ile içiçe yapı kullanabilirsiniz

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { 
    text-decoration: underline; 
  }
  body.firefox & { 
    font-weight: normal; 
  }
}

Sonuç

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

Nested Properties (içiçe öznitelikler)

Bazı özellik gruplarını (font, margin, padding) tekrar yazmak yerine süslü parantezler içerisinde toplayabilirsiniz

.content {
  font: {
    family: arial;
    size: 30em;
    weight: bold;
  }
}

Sonuç

.content {
  font-family: arial;
  font-size: 30em;
  font-weight: bold;
}

Variables (Değişkenler)

Sass’ın en güzel özelliklerinden biri değişken kullanımına ve bazı veri tiplerine imkan vermesidir. Örneğin sitenizde tema olarak kullanacağınız ana rengi bir değişkende tutarak bir çok yerde kullanabilirsiniz üstelik daha açık ve daha koyu tonlarını tekrar yazmadan ana renginiz üzerinden ayarlayabilirsiniz.

$width: 100px;
$color: #04a3f9;
#sidebar {
  width: $width;
}
#content {
  color: $color;
}

Sonuç

#sidebar {
  width: 100px;
}
#content {
  color: #04a3f9;
}

Extend (Genişletme)

Bir selector ifadesine başka bir selector’ü implement etme işlemidir. Bunu programlama dillerindeki bir class’ın başka bir class’tan türemesi olayına benzetebilirsiniz. Bu işlem de bir çok işinizi kısaltacaktır.

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

Sonuç

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

Zincirleme yönetemiyle kullanım

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
}

Sonuç

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; 
}

.seriousError, .criticalError {
  border-width: 3px; 
}

.criticalError {
  position: fixed;
}

Resmi dökümantasyon sitesine bu adresten ulaşabilirsiniz.

devamı gelecek…

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

5.0 Ort. (93% puan) - 1 oy

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir