LESS Nedir?

Less nedir?

Less Ruby de geliştirilmiş ve zaman içinde 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 yoldam 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ığı elde eden nadir dillerden biridir.

Kullanıcıya sunmuş olduğu birçok kolaylık mevcut sadece içlerinde en yararlı olan özelliği değişken tanımlama özelliğidir. Değişken tanımlayarak yazılan kodları daha rahat ve süratli yöntemde yazmanınızı sağlar. Ek olarak ileride birden oldukca alanın güncellenme şeklinde bir durum oluştuğunda ilgili değişkenin güncellenmesini rahatça yapabilirsiniz.

Less birçok kullanıcıda  merak uyandırmaktadır. Bundan dolayı oldukca sayıda kullanıcı tarafınca da ilgi görmektedir. Less dosyasının kullanımı ve kurulumu süratli ve basittir. Yalnızca tarayıcı ve node.js üstünde çalışabilmektedir ve Less.js ve CSS olmak suretiyle iki değişik şekilde kullanılabilmektedir.

LESS aynı süre da size tasarım şablonları hazırlamanızda da destek oluyor. Mesela oldukca sık tasarımlar icra eden 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 mevzuda da less üstünde küçük bir script hazırlayıp bu işleri halledebilirsiniz.

Peki {nasıl} çalışır bu less?

Kurulum  ve Başlangıç  Aşaması

LESS yalnız tarayıcı yada node.js üstünden ç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 sonrasında canlıya geçme aşamasında tüm LESS dosyaları CSS’e çevrilebilir ve o haliyle yayınlanabilir. Böylece yalnız 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 icra eden birçok vasıta mevcut. En popülerlerinden biri de LESS2CSS.

2 .Yöntem : LESS.JS Kullanımı

Bu yöntem LESS’in kendi web sayfasında da tanım edilen, LESS dosyalarınızın altına ekleyeceğiniz bir JS dosyası yardımıyla tüm yoldam tanımlanırız gerçek zamanlı olarak işlenir ve çalışır hale gelir. Kullanımı kolaydır. Sadece kimi süre verimsiz olabilir. Zira sitenize giren kullanıcının tarayıcısı daha çok işlem yapmak zorunda kalır.

Web sayfanıza aşağıdaki satırları eklemek kafi. Burada mühim nokta stillerimizi içeren LESS dosyaları JS dosyasının üzerine olmak durumunda.

3. Yöntem : Mixins

Yoldam birleştirmeleri (Mixins) yapısı yardımıyla daha ilkin başka bir element için tanımladığımız yoldam seçeneklerini bir başka element için de kullanılabilir kılıyoruz. Düzgüsel CSS yazarken bu işlem bir oldukca kodu kopyala yapıştır mantığında  yapmamıza sebep olur ve satır sayısını fazlasıyla arttırırdı.

Örnek :

.tecrübe etme{

    margin:8px;

    padding:18px;

}

.kontrol{

    border-radius:100%;

    text-align:left;

    margin:8px;

    padding:18px;

}

Örnekte de görüldüğü  şeklinde padding ve margin tanımlarını .tecrübe etme‘yi kopyalamak durumunda kaldık. Fakat LESS tarafında bu işi yapmak oldukca kolay.

.tecrübe etme{

    margin:8px;

    padding:18px;

}

.kontrol{

    border-radius:100%;

    text-align:left;

    .tecrübe etme

}

Less kullarak yalnız .kontrol‘i çağırmak, padding ve margin tanımlamalarını geçerli kılmak için kafi olacaktır.

4. Yöntem : İç içe elemanlar

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

ÖRNEK:

  • 1. Unsur
  • 2. Unsur
  • 3. Unsur

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

ul{

    margin:20px;

    font-size:14px;

    li{

        padding:5px 8px;

        color:green;

        a{

            color:blue;

        }

    }

}

Eğer bunu düzgüsel CSS ile yazacak olsaydık ya da bu LESS kodunu CSS’e convert edecek olsaydık karşılaşacağımız netice şu olacaktı :

ul{

    margin:20px;

    font-size: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;

div{

    width:@genislik – 80;

}

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

6. Fonksiyonlar

LESS deki fonksiyon desteği onu daha oldukca  programlama dili şeklinde göstermekte.

ÖRNEK:

@mavi : blue;

a{

    color:@mavi;

    &:hover{

        color:desaturate(@mavi,50%);

    }

}

Bu örnekte mavi renkteki bir bağlantı üstüne gelindiğinde daha koyu bir hal almakta. Bu kodun düzgüsel CSS’deki karşılığı ise şu şekilde :

a{

    color:blue;

}

a:hover{

    color:#24466c;

}

Yorum yapın