LESS CSS Nedir?

2009 yılında Alexis Sellier tarafından Ruby üzerinde geliştirilmiş ardından JavaScript’e taşınmış olan bir css preprocessor (css önişlemcisi) dir.

Yıl 2009’da yazılan, çoğu kişinin 2012 yılında kurcalayıp “bu ne lan” dedikten sonra kullanmaya başladığını Less’i 2015 yılında kullanma fırsatı elde ettim. Daha doğrusu öncesinde ihtiyaç duymadığımdan ve iş güç olmadığından hiç kurcalama, kullanma ihtiyacı hissetmemiştim.

Less İle Dinamik CSS Nasıl Yazılır?

Proje üzerinden gerekli düzenlemeleri yaptıktan sonra Less yazmaya başlayabilirsiniz. Mesela her seferinde  color: #0099ff; yazıp yazı rengini ayarlamak yerine @degisken: #0099fff; olarak tanımlayıp rengi color: @degisken; olarak yazıyoruz. Az buçuk programlama bilenler değişkenleri tanır. Nasıl bir faydası olduğunu bilir.

Kısacası bize esneklik ve kontrol sağlıyor bu Less. Sitedeki tüm mavi rengi tek bir değişken üzerindeki değeri değiştirerek değiştirmiş oluyoruz.

Less CSS Kurulumu (Projeye Dahil Edilmesi)

Projeye dahil etmek için derleme yöntemini kullanabilir veya less.js dosyası ile işinizi çözebilirsiniz. Ben less.js ile kullandığım için derlemeyi es geçiyorum.

Buradan güncel less.js dosyasını indirip projeye dahil ediyoruz.  Birde custom.less gibi bir lesscss dosyası oluşturup dahil edin. Daha sonra geriye bunları <head></head> tagları arasında çağırmak kalıyor.

Projeye dahil ettiğimize göre Less yazımına başlayabiliriz. Alışınca yazması çok kolay. CSS yazarken sizi gereksiz tekrarlardan kurtarıyor ama bi kez düzeni bozup çorba ettiğinizde okunması zor less / css karışımı kötü bir görüntü ortaya çıkıyor.

Önemli: .less stylesheets tanımlamasını script dosyasından önce eklemeniz gerekiyor.

Örneklerle Less Kullanımı

Renk Kullanımı

Örnek: Sitede sarı, siyah ve beyaz renkler kullanılacak. Beyaz arka fon, siyah genel yazı renkleri ve sarı ise öne çıkarmak istediğimiz alanlar için (&:hover, menü arkaplanı vs..) kullanılacak renk olsun. Birde bunların açık koyu renk tonları + şeffaf halleri olabilir. Onları da göz önünde bulunduralım.

Yukarıda her yerde kullanmak üzere değişkenler tanımladık. Renk ihtiyacı olduğu anda kullanabiliriz. “kutu” adında class’ı olan divin css çıktısı aşağıdaki gibi olacak.

Kutu :hover olduğunda arkaplan 50% oranında saydamlaşacak. Bunu fade ile yapıyoruz.

Birde a elementine stil tanımlaması yaptık. Linklerin rengi siyah, üzerine gelince sarı olsun istedik. Onunda çıktısı

yukarıdaki gibi olacak. Burada fark ettiyseniz iç içe yazım var. a elementinin hover durumunu kendi içine yazdım.

İç içe yazım kuralı karışıklığı önleyebiliyor.