Css Önişlemci Nedir ? Bizlere Neler Sunuyor ?

Dünyayı birbirine bağlayan ve her geçen gün daha fazla insana ulaşan internet gelişen altyapı teknolojileri ile artık hız olarak da beklentilerimizi karşılamaya başladı. Herkesimden insana hitap eden ve günümüzde birçok kişinin hayatında yadsınamaz bir yeri olan internet için sadece alt yapı ve insan sayısında gelişim var demek mümkün mü ? Tabi ki de bu sorunun cevabı hayır, hemen hemen her teknolojide olduğu gibi internet teknolojilerinde de birçok yenilik gün geçtikçe hayatımıza giriyor. Bu yazımızda da web sitelerinin olmazsa olmazı CSS’e ek özellikler katan Css Önişlemci (css processors) kavramından ve getirdiği yeniliklerden bahsedeceğim.

HTML ve css web teknolojileri ile ilgilenen veya yazılıma biraz ilgi duyan kişilerin sıklıkla karşılaşabileceği tabiri caizse bir elmanın iki yarısı konumundaki metin işaretleme dilleridir. HTML ile şuan yazıyı okuduğunuz internet sitesinde yer alan yazıları, butonları veya ses dosyalarını sizlere kolayca gösterebiliyoruz fakat tasarım noktasında örnek vermek gerekirse butonun rengi için Css kodlarına ihtiyaç duyuyoruz. Yani HTML ile bir nesneyi ekrana koyuyoruz ve Css ile özelliklerini belirtiyoruz. Böyle söylenince her şey çok kolay gibi fakat gelişen teknoloji ile artık internet siteleri hemen hemen her ihtiyaçlarımıza cevap verecek donanımlara sahip olması gerekiyor ki bu da artık çok daha kompleks ve güçlü yapıların ihtiyaçlarını doğuruyor. Bu noktada HTML ve Css maalesef günümüz trend sitelerinin alt yapılarını güçlendirecek donanımların birçoğuna sahip değil. Bu yüzden Css’in hantal yapısına çözüm arayan geliştiriciler eksik gördükleri Css özelliklerini gidererek Css Önişlemci araçlarını geliştirmişler.

CSS Önişlemci Nedir ?

Css’in gelişen web teknolojileri karşısında yetersiz kaldığını belirtmiştim. Bu durumun en büyük sebebi aslında HTML ve Css’in programlama dili olmamalarından geliyor.Bu sebeple birçok programlama dilinde kolayca kod yazmamızı sağlayan değişken tanımlama, fonksiyon yapısı gibi özellikleri barındırmıyor.İsterseniz bu noktada kısacası Css’in yetersiz kaldığı ve Css Önişlemci kütüphanelerinin çözdüğü sorunları listeleyelim ve ardından detaylıca inceleyelim.

  • Değişken Tanımlama
  • Mixin ve Fonksiyon Kullanımı
  • Gelişmiş Hesaplama araçları gibi

CSS Önişlemci ile Değişken Tanımlama

Orta veya büyük ölçekli web sitelerinde birçok değişkeni defalarca kullanıyoruz. Bu noktada hem çok fazla kod satırına sahip oluyor hem de ilerleyen dönemlerde aynı kodları düzenlemede sıkıntılar yaşıyoruz. Bu sebeple Css Önişlemcilerin hepsinde değişken tanımlama özelliği mevcut.Böylece projemizde ilerleyen zamanlarda herhangi bir düzeltme yapmak istersek kolayca sadece değişkenin değerini değiştirebiliriz fakat normalde Css’te böyle bir durum karşısında satır satır dolaşarak değerleri güncellememiz gerekiyordu. Ayrıca ortak değişkenler ile projenin okuna bilirliği arttırarak sürekliliğini de kolaylaştırmış oluyoruz.

Örneğimizde popüler Css Önişlemcileri arasında yer alan Less ile hazırlanmış bir değişken örneği mevcut. Gördüğünüz üzere sitemizde ki yazılarda kullanacağımız yazı ve arka plan renklerini bir değişkene atadık ve daha sonrasında alt tarafta yer alan h1 etiket özelliklerinde kullandık. Bunu ilerleyen zamanlarda güncellemek istersek üst satırdaki 2 kodu değiştirerek kolayca yapabileceğiz.

Mixin ve Fonksiyon Kullanımı

Css’de farklı değişkenlere aynı temel özellikleri vermek için birçok kod satırını tekrar tekrar yazmamız gerekiyor. Her ne kadar bunları kopyala+yapıştır ile hızlıca yapsakta maalesef ilk maddede de dediğim gibi kod satır sayısının artması ile hem projemizin okunurluğu azalıyor hem de müdahale için sağladığımız efor artıyor. Bu noktada yine Css Önişlemcilerinde mixin ve fonksiyon kullanımı mevcut.

Örnek kodumuzda gördüğünüz gibi Widget için tanımladığımız özellikleri tekrar .welcome etiketinde kullanmak için tek yapmamız gereken fonksiyona değiştirmek istediğimiz parametreleri göndermek. Burada tam olarak Php veya Java gibi dillerdeki fonksiyon mantığı olmasa da yakın ve aynı amaca hizmet eden bir yapıdan söz etmemiz mümkün.

Gelişmiş Hesaplama Araçları

Önişlemciler ile gelen değişken tanımlama sayesinde değişkenleri kullanarak toplama, çıkarma gibi temel işlemleri de kolayca yapabiliyoruz.

Hangi CSS Önişlemcileri Mevcut ve Hangisini Tercih Etmeliyiz ?

Kod örneklerini incelerseniz özellikle birinci ve ikinci örnekteki kodlar arasında ki syntax farkını görebilirsiniz. Bunun sebebi birinci örneğin Less diğer örneğin ise Stylus ile hazırlanmış olması . Bu aşamada sizin de aklınıza muhtemelen hangisini tercih etmeliyim sorusu gelmiştir. Bu noktada popüler olan ve dünya genelinde sıklıkla tercih edilen üç Css Önişlemcisi mevcut bunlar; Less, SASS ve Stylus. Fakat bu Önişlemcilerin hiçbirinin birbirine karşı ağır bir özelliği mevcut değil. Hemen hemen hepsi aynı özellikleri aynı şekilde kullanmamıza olanak sağlıyor. Değişen sadece arka planda kullandıkları teknolojiler ve ufak syntax farkları. Bu noktada bu da bizler için bir sorun teşkil etmiyor çünkü derlediğimiz de hepsinde çıktı olarak Css elde ediyoruz. Fakat yine bunlar arasında illa bir seçim yapmanız gerekecek ve bu kararı en iyi şekilde verebilmek için de üçünü de ayrı ayrı araştırarak kendinize göre değerlendirmelisiniz.

Ayrıca bu yazı esnasında yaptığım araştırmada Sahibinden sitesinde ki front-end ekibinin Stylus ile çalıştıklarını öğrendim. Neden diğer Önişlemcileri değil de Stylus kullandıklarını bir yazı ile açıklamışlar, eğer siz de okumak isterseniz kaynak kısmına sizler için ekledim.

Bilgi Edindiğim Kaynaklar  :

Leave a Comment