Less burada devreye giriyor ve size bugüne kadar hiç bir css eklentisinin olamadığı kadar yardımcı oluyor. CSS kodlarınzı dinamikleştiriyor, bir değişken atayıp o değişkeni çoğu alanda kullanıp tek bir değişken üzerinden tüm satırlarda değişiklik yapma olanağını size sunuyor. Bunun ile birlikte çoğu matematik işleminde neredeyse php gibi işlem yapıyor, responsive tasarımlar hazırlamanıza yardımcı oluyor.
LESS aynı zaman da size tasarım şablonları hazırlamanızda da yardımcı oluyor. Örneğin çok sık tasarımlar yapan birisiniz ve her seferinde belirli kodları yazmaktan sıkıldınız kopyala yapıştır ile uğraşmadan bu işin içinden çıkmak istiyor ve bir kalıp hazırlamak istiyorsunuz. Bu konuda da less üzerinde ufak bir script hazırlayıp bu işleri halledebilirsiniz.
Peki nasıl çalışır bu less mantık nedir nasıl çalıştıracağız ?
<script></script>
//style.less içine ise
@zamazingo : #143352; body{background: @zamazingo;}
//siteniz
Buradaki arkadaşımız less’in çalışması için biraz .js gerekiyor bu yüzden ilk satırda .js dosyasını sayfaya çağırdık. ( taglarımızın arasına ekliyoruz.) Daha sonra style.less oluşturuyoruz onu da css çağırır gibi sayfamıza çağırıyoruz. Dilerseniz hiç bir .css dosyası kullanamayıp her şeyi .less üzerinden yapabilirsiniz.
Geçelim kodumuza, gördüğünüz gibi zamazingo adında bir değişken oluşturduk ve sitenin arka planında zamazingo değişkenine atanan rengin çıkmasını istedik. PHP ‘deki değişken mantığının aynısı. Bu sayede işlerimizi daha kolay ,basit şekilde indirebiliriz. Bunu sadece renkler üzerinde değil yükseklik ,genişlik ,boyut gibi kavramlarda da kullanabiliriz en boy hesaplamalarına göre ya da ortalamalarına göre işlem yapabilir ona göre bir sonuç çıkarabiliriz.
Kaynak
