CSS ön işlemciler CSS kodlamasını kolaylaştıran teknolojilerdir. CSS her ne kadar kolay bir kodlama yapısına sahip olsa da kodlar sıklıkla tekrar ettiğinden kodlamayı tamamlamak oldukça fazla zaman alabilmektedir. Ön işlemciler ise kod tekrarlarını en aza indirir, kodların güncellemelerini basitleştirir ve düzenli olmasını sağlar. Bu yazımda en popüler 3 CSS ön işlemciden bahsetmek istiyorum.

İlk olarak bu teknolojiler CSS kodlamasını nasıl kolaylaştırır konusuna değinmek istiyorum. (Örneklerde SCSS kodlaması kullanılmıştır)

Ön işlemcilerde değişkenler tanımlanabilir. Kodlamaya başlarken sayfa yapımızda kullanacağımız bütün renk ve fontları değişkenlere atayıp istediğimiz yerde kullanabiliriz. Örneğin :

CSS

body { color : #000; padding:0; }
.katman1 { color : #F90; margin: 5px; }
.katman2 { color : #F90; }
.katman3 { color : #000; }

SCSS

/*TANIMLAMALAR*/
$renk1 : #000;
$renk2 : #F90;
/*KODLAMA*/
body { color : $renk1; padding:0; }
.katman1 { $renk2; margin: 5px; }
.katman2 { $renk2; }
.katman3 { $enk1; }

Bu sayede değişkenlere atadığımız renk ve fontları istediğimiz zaman değiştirebilir ve bütün sayfanın güncellemesini tek bir yerden yapabiliriz. Ayrıca "bu rengin kodu neydi, nerde kullanmıştım, fontun adı neydi" gibi zaman kaybettiren problemler de ortadan kalkmaktadır. Kodlamada değişkenlerin ismini yazmak yeterli olacaktır.

CSS kodlamasında bazı kod blokları fazlaca tekrarlanır. Bu tekrarlanan kodları önceden tanımlayıp istediğimiz yere kolaylıkla ekleyebiliriz. Örneğin flex özelliklerini sıklıkla kullanıyorsak CSS kodlamamız aşağıdaki gibi olacaktır.

CSS

body{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   color: #000;
   padding: 5px;
}

.katman1{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

SCSS

%dis-flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

body{
   @extend %dis-flex;
   color: $renk1;
   padding: 5px;
}

.katman1{
   @extend %dis-flex;
}

Böylece tekrar eden kod bloklarını 1 satır kod ile istediğimiz elemana ekleyebiliriz.

Ön işlemcilerde HTML içinde tanımlanan elemanlara ulaşmak da çok kolaydır. Örneğin tanımlanan "menu" sınıfı içindeki "li" ve "a" elemanlarına CSS'den ulaşmak için tam olarak yollarını yazmamız gerekir.

CSS

 .menu li{
   padding:0;
   margin:5px;
}

.menu li a{
   text-decoration:none;
   border:1px solid #000;
}

SCSS

.menu{
  li {
     padding:0;
     margin:5px;
  }

  a{
     text-decoration:none;
     border:1px solid #000;
  }

  &:hover{
    color:red;
  }
}

Bu özelliklerin dışında CSS içinde kullanamadığımız fonksiyonlar, döngüler, şart koşulları gibi programlama dillerinde bulunan pek çok özelliği de CSS ön işlemciler ile kullanabiliriz.

Hangi ön işlemciyi kullanmalı?

Eğer sıklıkla CSS kodlamasını yapıyorsanız mutlaka bir ön işlemci kullanmanızı öneririm. Fakat hangisini kullanılmanız gerektiği sizin durumunuza bağlıdır. Eğer "Ben CSS kodlaması yaparak para kazanacağım, böyle bir işte çalışacağım" diyorsanız, SCSS kullanmanızı öneririm. Çünkü bu ön işlemci piyasada en fazla kullanılan ön işlemcidir. Çalışmaya başladığınızda karşınıza gelecek projelerde SCSS görmeniz büyük bir olasılıktır. Eğer "Sıklıkla CSS kodlaması yapıyorum fakat bu benim için bir hobidir" diyorsanız istediğiniz ön işlemciyi kullanabilirsiniz. Popüler ön işlemcilerin sayfalarını ziyaret edebilir, örnek kodlamalara bakabilir, hangisinin düzeni hoşunuza giderse, hangisini daha kolay kullanabileceğinizi düşünyorsanız o ön işlemciyi kullanabilirsiniz. Aşağıdaki linklerden popüler ön işlemcilerin sayfalarını inceleyebilir ve kod örneklerini görebilirsiniz.

SASS ve SCSS

Less

Stylus