CSS Kodu Yazmanın Hızlı ve Pratik Yolu : LESS

2 ay önce , Okuma süresi 3 dakika.

ablon hazırlama olanağı sunan, yazıları ya da web sayfalarını biçimlendirmek için kullanılan CSS (Cascading Style Sheets=Stil şablonları) HTML’ye ek olarak metin ve format biçimleyicisi bir teknolojidir.
CSS Kodu Yazmanın Hızlı ve Pratik Yolu : LESS

Öncelikle makaleme başlamadan önce  diğer yayınlarımı da kaçırmamak adına takipte kalmanızı rica ediyorum. 


CSS yazabilmenizi hızlandıran ve kolaylaştıran, özellikle satır sayısı fazla olan büyük projelerde kullanım kolaylığı sağlayan dinamik bir stil dosyasıdır. CSS ön işlemcisi de denilebilir. CSS’deki kod fazlalığını ortadan kaldıran LESS; değişken özelliğiyle yazılan kodları daha hızlı ve basit bir kuralla yazmaya yardımcı olur. 49 kb’lık LESS.js ve CSS olmak üzere iki şekilde kullanılabilmektedir.

Tasarımcının kodla haşır neşir olduğu ender dillerdendir CSS. Çoğu zaman keyif verici bir dil olsa da büyük projelerde, satır sayısı binleri aştığında can sıkıcı bir hal alabiliyor. Bunun sebebi de çoğu zaman aynı kodları birden fazla yerde kullanmak durumunda kalıyor olmamız.En ufak bir yazı tipi veya renk değişikliği için bile özgün tanım yapmamız gerekiyor. Peki buna mecbur muyuz? Tabii ki hayır.

LESS daha hızlı ve kolay CSS yazabileceğimiz bir araç. İsmi genellikle SASS ve Stylus gibi benzer araçlarla birlikte anılan bu araç front-end development tarafında işleri fazlasıyla keyifli hale getiriyor.

LESS’in Faydaları ?

LESS büyük projelerde çok fazla kullanım kolaylığı sağlayacaktır. Bu kullanım kolaylıkları

1 – Hızlı bir css yazımı,

2 – Daha az kural yazımı,

3 – Daha hafif css dosyaları olacaktır (ama less.js version 1.3.0’nin +49KB olduğunu unutmayalım)

LESS yazarken dikkat etmemiz gereken noktalar neledir ?

1 – Noktalama hatalarında komple stil.less dosyasını uçuruyor ve stil dosyası yokmuş gibi okuyor.

2 – Var olmayan veya yanlış yazılmış değişken isimleri olduğunda stil dosyasını yokmuş gibi okuyor.

3 – Sayısal işlemlerde “-” değerini kullanmadan önce mutlaka boşluk bırakılmalı çünki – değerini tire gibi okuyor.

Kurulum  ve Başlangıç  Aşaması

LESS sadece tarayıcı veya node.js ü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 : LESS.JS 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.

 

 

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{
    border-radius:100%;
    text-align: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{
    border-radius:100%;
    text-align: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:

 

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 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;
    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 çok  programlama dili gibi göstermekte.

ÖRNEK : 

@mavi : blue;
a{
    color:@mavi;
    &: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;
}

Esenle kalın....

#css