less nedir ?

Less Ruby de geliştirilmiş ve zamanla Javascripte aktarılmış bir css preprocessor (css önişlemcisi) dir

Less içinde fonksiyonları, değişkenleri, karıştırmaları(mixin), matematiksel hesapları barındıran ve css yazımında kod fazlalığının önüne geçen bir dinamik stil dosyasıdır Stilleri tüm özellikleriyle destekleyen aynı zamanada içinde kendi kurallarını barındıran ve kullanıldığı projede büyük yazılım kolaylığı sağlayan ender dillerden biridir

Kullanıcıya sunduğu birçok kolaylık mevcut ancak içlerinde en yararlı olan özelliği değişken tanımlama özelliğidir Değişken tanımlayarak yazılan kodları daha basit ve hızlı yöntemde yazmanınızı sağlar Ayrıca ileride birden çok alanın güncellenme gibi bir durum oluştuğunda ilgili değişkenin güncellenmesini rahatlıkla yapabilirsiniz

Less birçok kullanıcıda merak uyandırmaktadır Bu nedenle çok sayıda kullanıcı tarafından da ilgi görmektedir Less dosyasının kullanımı ve kurulumu hızlı ve basittir Yalnızca tarayıcı ve node üzerinde çalışabilmektedir ve Less ve Css olmak üzere iki farklı şekilde kullanılabilmektedir

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

6Peki nasıl çalışır bu less?
5Kurulum ve Başlangıç Aşaması
LESS sadece tarayıcı veya node üzerinden çalışan bir JavaScript yazılımıdır Kullanımında ise iki ayrı yöntem önerilmekte

1 Yöntem : LESS dosyalarını CSS olarak derlemek

Projenizi LESS ile yazdıktan sonra canlıya geçme aşamasında tüm LESS dosyaları CSS’e çevrilebilir ve o haliyle yayınlanabilir Böylece sadece development aşamasında değil site hızı tarafında da hız kazanılır Online olarak LESS’den CSS’e kod çevirimi yapan birçok araç mevcut En popülerlerinden biri de LESS2CSS

2 Yöntem : LESSJS Kullanımı

Bu yöntem LESS’in kendi web sayfasında da tarif edilen, LESS dosyalarınızın altına ekleyeceğiniz bir JS dosyası sayesinde tüm stil tanımlanırız gerçek zamanlı olarak işlenir ve çalışır hale gelir Kullanımı kolaydır Ancak kimi zaman verimsiz olabilir Çünkü sitenize giren kullanıcının tarayıcısı daha fazla işlem yapmak zorunda kalır

Web sayfanıza aşağıdaki satırları eklemek yeterli Burada önemli nokta stillerimizi içeren LESS dosyaları JS dosyasının üstüne olmak durumunda

link rel stylesheetlesshref styleless

script src lessscript

3 Yöntem : Mixins

Stil birleştirmeleri (Mixins) yapısı sayesinde daha önce başka bir element için tanımladığımız stil seçeneklerini bir başka element için de kullanılabilir kılıyoruz Normal CSS yazarken bu işlem bir çok kodu kopyala yapıştır mantığında yapmamıza sebep olur ve satır sayısını fazlasıyla arttırırdı

Örnek :

deneme{

margin:8px;

padding:18px;

}

test{

borderradius:100%;

textalign:left;

margin:8px;

padding:18px;

}

Örnekte de görüldüğü gibi padding ve margin tanımlarını deneme‘yi kopyalamak durumunda kaldık Ama LESS tarafında bu işi yapmak çok kolay

deneme{

margin:8px;

padding:18px;

}

test{

borderradius:100%;

textalign:left;

deneme

}

Less kullarak sadece test‘i çağırmak, padding ve margin tanımlamalarını geçerli kılmak için yeterli olacaktır

4 Yöntem : İç içe elemanlar

Less kullarak bir nesnenin iç içe elemanlı kullanımı çok çok kolay

ÖRNEK:



1 Öğe

2 Öğe

3 Öğe a href #Detaylara



Bu elemandaki her bir tanımı stilize ederken aşağıdaki yolu izleyebiliyoruz

ul{

margin:20px;

fontsize:14px;

li{

padding:5px 8px;

color:green;

a{

color:blue;

}

}

}

Eğer bunu normal CSS ile yazacak olsaydık ya da bu LESS kodunu CSS’e convert edecek olsaydık karşılaşacağımız sonuç şu olacaktı :

ul{

margin:20px;

fontsize:14px;

}

ul li{

padding:5px 8px;

color:green;

}

ul li a{

color:blue;

}

5 Yöntem : Dört İşlem

LESS kullanarak çarpma, bölme,toplama ve çıkarma işlemleri de yapabiliyoruz Aşağıda bununla ilgili örnek verilmiştir

ÖRNEK:

@genislik:380px;

{

widthgenislik 80;

}

Bu işlemi yaparak 300px genişliğinde bir hazırlamış olduk

6 Fonksiyonlar

LESS deki fonksiyon desteği onu daha çok programlama dili gibi göstermekte

ÖRNEK:

@mavi : blue;

a{

colormavi;

&:hover{

color:desaturate(@mavi,50%);

}

}

Bu örnekte mavi renkteki bir link üzerine gelindiğinde daha koyu bir hal almakta Bu kodun normal CSS’deki karşılığı ise şu şekilde :

a{

color:blue;

}

a:hover{

color:#24466c;

}