Ace quick missions & earn crypto rewards while gaining real-world Web3 skills. Şimdi Katıl ! 🔥
Ön yüz ile çalışırken, CSS'ten (Cascading Style Sheets) kaçamazsınız – bu, tarayıcıda her web sitesinin nasıl görüneceğini tanımlıyor. HTML ve JavaScript ile birlikte CSS, web için kullanılan üç ana teknolojiden birisi olarak görülüyor. Ancak, bazıları bunun biraz ilkel olduğunu ve bakımının zor olduğunu söylüyor. CSS ilk olarak 1996'da çıktı, ve hala güncelleniyor olsa da, temel sözdizimi çok da değişmedi. İşte burada iyi seçilmiş bir CSS ön işlemcisi size yardımcı olabilir.
İçindekiler
Öncelikle, bir CSS ön işlemcisi nedir?
İnternet tarayıcıları sadece CSS anlıyor ve bekliyor, bu yüzden CSS yeni bir dille değiştirilemez. Ancak, CSS de kendine has bazı kısıtlamalara sahip, bunlar da küçük projelede hissedilmeseler de, çok büyük stil sayfalarıyla uğraşırken geliştiricileri yoruyorlar. Bu problemi çözmek için, yazılımcılar CSS ön işlemcisi kullanıyorlar. Temellerinde, ön işlemciler kendi özgün sözdizimine sahip programlar. Kodunuzu yazdıktan sonra, onlar bu kodu saf CSS'e çeviriyor.
Take advantage of this special Udacity coupon code & access selected Udacity courses for free! Learn new skills & develop your career at zero cost.
CSS ön işlemcisi kullanma sebebimiz ise CSS'nin diğer türlü sahip olamayacağı ek özellikleri eklemek. Örneğin, yuvalama veya katılım seçimi, ve mixin'ler (yeniden kullanılabilir deklarasyon demetleri) gibi özellikler. Kullanışlı ek özellikler sayesinde günlük işlerinizde daha etkili çalışabilirsiniz ve işleriniz de ekstra ölçeklenebilir olur.
Hangi CSS ön işlemcisi kullanmaya değer?
Bir CSS ön işlemcisi seçmek kolay bir iş değil. Tıpkı diğer bilgi teknolojileri gibi, birçok tercihe sahipsiniz, hepsi de keid avantajlarına ve tutkulu bir kullanıcı kitlesine sahip. Bir seçim yapmak için, seçeneklerinizi bilmeli, güçlü yönlerinin farkında olmalı, ve farklılıklarını da anlamalısınız.
Sass ve SCSS
İlk olarak 2006'da çıkan Sass (Syntactically Awesome Style Sheets – CSS'nin resmi ismi üzerinde zekice bir oyun), CSS ön işlemcisi konusunda bir öncü olarak görülüyor. En popüleri olmasına da şaşırmamak lazım! Sass ayrıca Bootstrap 4'te de kullanılıyor, ki bu da dünyada en çok kullanılan ön yüz iskeleti ve BT dünyasında ağırlığa sahip bir trend belirleyici.
Şu an, iki farklı sözdizimine sahip: Sass ve SCSS. Ön işlemcinin ilk versiyonlarında sadece Sass varken, takım bunun sade CSS'den çok farklı olabileceğinden korktu ve üçüncü versiyonda SCSS (Sassy CSS) adında yeni bir sözdizimi sundu. Dosyalar da ya .sass ya da .scss uzantısına sahip olabiliyor.
Sass ve SCSS arasındaki ana fark SCSS'nin CSS'deki gibi noktalı virgül ve parantez kullanımına sahip olması. Diğer yandan Sass, böyle bir kullanıma sahip değil – dahası, atama için iki nokta yerine eşittir kullanıyor. SCSS şu an Sass CSS ön işlemcisinin ana sözdizimi olsa da, orijinal versiyonu kullanımdan kaldırmayla alakalı herhangi bir plan yok. Bazı geliştiricilerin iddialarına göre daha kısa olduğu için okunurluğu da daha fazla. Ancak SCSS, hem CSS'ye entegre etmesi hem de öğrenmesi daha kolay bir ön işlemci.
Less
Less (Leaner Style Sheets) ilk 2009'da çıktı. Sass'tan esinlenen bu ön işlemci, sonradan çıkan SCSS formatının esin kaynağı oldu. Neden? Çünkü Sass sözdiziminin ilk versiyonunun aksine, bu CSS ön işlemcisi ilk olarak mümkün olduğu kadar saf CSS'ye benzeme amacıyla çıktı. Bu da hem daha düz bir öğrenme eğrisi, hem de CSS'de önceden yazılmış kodları Less'te kullanabilmek anlamına geliyordu. Less CSS ön işlemcisi JavaScript'te yazıldığından, kurulumu da daha basit.
Less ve Sass'ı karşılaştırırsak, temel fonksiyonlarında oldukça benzer olduğunu göreceğiz. İkisi de yuvalama, değişken kullanımı ve içe aktarmayı destekliyor. Ancak Less'te, değişkenleri kaldırabilir ve Sass'ta yapamayacağınız şekilde renklerden belirli bileşenleri çıkartabilirsiniz – bunlar, ton, doyum, ve parlaklık. Diğer yandan, Sass if ifadelerini destekliyor ve bunları seçicilerde ve özellik isimlerinde kullanabiliyorsunuz. sözdizimi ayrıca üçlü operatörü ve toplayıcıları yuvalamayı destekliyor – ne yazık ki Less bunları desteklemiyor.
Less'in bir diğer dezavantajı da değişken deklarasyonu için @ sembolünü kullanması (Sass bunun yerine $ işaretini kullanıyor). Ancak CSS'de, @ aynı zamanda ana kareler ve medya sorguları için de kullanılabiliyor. Bu da kodu okurken kafa karışıklığına sebep olabiliyor.
Stylus
Stylus adında bir başka CSS ön işlemcisi piyasada 2010 yılında görülmeye başlandı. Sass veya Less'e nazaran çok daha küçük bir kullanıcı tabanı olsa da, bakmaya değer. Stylus, Node.js kullanılarak yazılmış, bu yüzden bu dile aşina olanlar için çekici bir tercih. Ayrıca, kullanışlı fonksiyonlara ve mixin'lere sahip.
Stylus'u özgün kılan ilk özellik onun esnekliği: iki nokta, noktalı virgül, ve virgüller tamamen tervihe bağlı. Dahası, kod blokları tanımlamak için küme parantezine ihtiyacınız yok: Stylus bu iş için semboller yerine girintileri kullanıyor. Değişkenler içinse Sass gibi $ işaretini kullanabilirsiniz... ama kullanmayabilirsiniz de.
Tüm bunlar sonucunda daha az yazıp daha temiz bir koda sahip olabilirsiniz. Ne yazık ki, bazı geliştiricileri böyle bir esnekliği bir kusur olarak görüyorlar. Belirgin tanımlayıcıların olmaması kodu anlaması ve okuması zor yapıyor, bu özellikle büyük projeler için geçerli. Elinize geçense özgürlüğün getirdiği bir anarşi. Eğer Stylus ve Sass'ı karşılaştırırsak, Sass kesinlikle okunabilir koduyla öne çıkıyor.
- Kullanması kolay
- Kaliteli içeriğe sahip
- Fiyat konusunda saydam
- Tamamlamada ücretsiz sertifikalar
- Veri bilimi becerilerine odaklanıyor
- Esnek eğitim programları
- Basit tasarım (gereksiz bilgi yok)
- Yüksek kaliteli dersler (ücretsizler dahil)
- Çeşitli özellikler
- Nanodegree programları
- Firmalara uygun
- Ücretli tamamlama sertifikası
- Sektörde iyi biliniyor
- Pek çok özelliğe sahip
- Dersler üniversite düzeyinde
- Üniversite düzeyince dersler
- Şirketler için uygun
- Ücretli tamamlama sertifikası
PostCSS
En baştan bir şeyi açıklığa kavuşturalım: PostCSS aslında bir CSS ön işlemcisi değil. Takım en başta bu terimi kullanmış olsa da, sonrasında hatalarını ele almışlar. Bu bir ön işlemci veya son işlemci olarak kullanılabiliyor – aslında, size kodunuzu optimize edip temizleme konusunda yardımcı olacak ve diğer birçok işi yapacak bir işlemci. Özünde PostCSS, size birçok JavaScript eklentisi sunan bir API (ayrıca kendi eklentilerinizi de yazabilirsiniz). Bunları kullanarak, CSS işleyebilir ve özel araçlar geliştirebilirsiniz.
PostCSS ilk olarak 2013'te çıktı ve yedinci versiyonunda. Onu hem sade CSS sözdiziminde hem de üstteki ön işlemcilerin sözdiziminde kullanabilirsiniz. Onu Sass, Less, ve diğer CSS ön işlemcilerinin önüne geçirense modüler olması. İstediğiniz özellikleri seçmenize olanak sağlıyor ve daha hızlı çalışıyor. Popülerliğinin hızlıca yükseldiğini görmek şaşırtıcı değil – bazı umumi açıklamalar onun Bootstrap'in sonraki versiyonunda kullanılabileceğini dahi söylüyor.
Biliyor Muydunuz?
Kariyeriniz için hangi online eğitim platformunun daha iyi olduğunu merak etmiş miydiniz?
Kripto Para Borsalarıyla alakalı kapsamlı yazılarımızı, rehberlerimizi ve eğitici yazılarımızı inceleyin. Bilgi sahibi olun ve buna göre karar verin!
Bilmeniz gereken daha ne var?
CSS ön işlemcisi kullanırsanız, derleme adımına ihtiyacınız olacak, bu da hem geliştirmeyi hem de hata ayıklamayı yavaşlatabilir. Ayrıca, en son ortaya çıkan CSS dosyası büyük olabilir.
Ancak, bu noktada getiriler, dezavantajlardan çok daha fazla. Değişkenler, mixin'ler, yuvalama, birçok ek fonksiyon – tüm bu özellikler, kod yazmayı ve bakımını çok daha kolay hale getiriyor. Rahat hissettiğiniz bir ön işlemci seçin ve CSS'nin geliştirilmiş özelliklerinden şu an faydalanın!
Makale Uzmanları ve Analistleri Hakkında
