Anasayfa / Web Tasarım / LESS Nedir Nasıl Kullanılır?

LESS Nedir Nasıl Kullanılır?

CSS dilinin ön işlemcilerinden biri olan LESS kod yazmayı daha kolay hale getirmek amacıyla ortaya çıkmıştır. Bu konuda oldukça basit bir kullanımı bulunan bu araç ile kolaylıkla değişken oluşturabilir, fonksiyonlar yazabilir veya matematiksel işlemler yapabilirsiniz. Bunların haricinde mixin yapısı ve iç içe kurallar ile hızlı ve kolay anlaşılabilir kodlar yazabilirsiniz. LESS ön işlemcisinin yanı sıra bu özelliklere sahip olan birkaç tane daha CSS ön işlemcisi vardır. SASS ve Stylus, LESS’in yanı sıra kullanımı yaygın olan diğer ön işlemcilerdendir. Fakat bunlara oranla kullanımının kolay olması ve kurulumunun basit olması nedeniyle LESS daha çok tercih edilmektedir.

LESS Kullanımının Faydaları

  • Programlama yapar gibi CSS kodları yazabilirsiniz.
  • Daha hızlı CSS kodları yazabilirsiniz.
  • Düşük dosya boyutlarında CSS dosyaları oluşturabilirsiniz.
  • Değişkenler oluşturarak ilerde tek bir değişiklikle CSS kodlarınızı düzenleyebilirsiniz.
  • Kolaylıkla tasarım şablonları oluşturabilirsiniz.

LESS Nasıl Kullanılır?

İlk izlenimde geliştiricilerin gözüne karmaşık gibi görünse de LESS’in kullanımı oldukça basittir. Sadece javascript dosyasını sayfanıza dahil ederek LESS kodları yazabilirsiniz. Bunun için Lesscss.org adresine girip javascript dosyasını indirmeniz ve sayfanıza çağırmanız gereklidir. İndirmeden dosyayı çağırmak istiyorsanız aşağıda bulunan CDN linkini sayfanıza dahil etmeniz gereklidir.

<script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js” ></script>

Yukarıda belirtilen dosyayı CDN servisini kullanarak siteye ekledikten sonra LESS kodları yazacağınız dosyayı siteye dahil etmeniz gereklidir. Fakat burada dikkat etmeniz gereken bir durum var oda yazacağınız LESS kodlarının uzantısının “.less” olmasıdır. Bu uzantıyı yazıp siteye dahil etmediğiniz taktirde LESS kodlarınız çalışmayacaktır.

LESS kodlarını derleyen programlar vasıtasıyla da bu işlemi yapabilirsiniz. Bu programlar arasında en popüler olan derleyici LESS2CSS’dir. Bu geliştirme sürecini olumlu yönde etkileyecektir.

LESS Dosyası Örneği

<!doctype html>
<html lang=”tr-TR”>
<head>
<title>LESS Örnek Sayfası</title>
<meta charset=”utf-8”>

<link rel=”styleshett/less” type=”text/css” href=”styles.less”>
<script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js” ></script>

</head>
<body>
</body>
</html>

LESS Yazarken Dikkat Edilmesi Gerekenler

  • Noktalama hataları yapılmamalıdır. Aksi taktirde site LESS dosyasını yokmuş gibi davranacaktır.
  • Değişken tanımlanırken dikkatli olunması gereklidir. Tanımlı olmayan değişkenler kullanıldığında site stil dosyası yokmuş gibi görünecektir.
  • Sayısal birtakım işlemlerden çıkarma yani “-“ işlemi yapılırken mutlaka boşluk bırakılmalıdır. Aksi taktirde eksi işareti tire şeklinde derlenecektir.

LESS Özellikleri

Değişken Oluşturabilme

LESS ile kolaylıkla değişkenler oluşturabilir ve bu değişkenleri dilediğiniz yerde kullanabilirsiniz. Bununla alakalı örneği aşağıdan bulabilirsiniz.

@link-color:#428aca;

a{
color:@link-color;
}

Bu değişkenler ile tek bir yerden kontrol sağlayarak daha hızlı kodlar yazabilirsiniz. Bunun için yukarıda da belirttiğim gibi önce  “@” işaretini daha sonra değişkenin adını “link-color” ve değerini yani “: #428aca” yazmalısınız. Daha sonra dilediğiniz yerlerde bu değişkenin adının başına “@” işareti koyarak çağırmalısınız.

Mixin Kullanımı

Mixin yapısı LESS ön işlemcisinin yanı sıra diğer ön işlemcilerde de var olan özelliklerden biridir. Bu özellik ile parametreli fonksiyonlar oluşturabilirsiniz. Böylelikle sürekli olarak yazmak zorunda kaldığınız işlemlerin daha hızlı bir şekilde yapılmasını sağlayabilirsiniz.

.a(@b,@c){
position: absolute;
top:@b;
left:@c;
}

.deneme{
.a(20px,30px)
}

Yukarıda belirtilen LESS kodunun CSS dilindeki karşılığı aşağıdaki gibidir.

.deneme{
position: absolute;
top:25px;
left:100px
}

İç İçe Kurallar

CSS kodu ile bir nesneye stil tanımlanırken aynı nesne içindeki nesneye stil tanımlama için tekrardan alt alta fazladan kod yazmak gereklidir. LESS bu sorunu ortan kaldırıp daha okunaklı CSS kodu yazılmasını sağlıyor. Bu kural birçok geliştiricinin en sevdiği özelliklerden biridir.

.menu{
border: 1px solid #ddd;
}

.menu li{
float:left;
}

.menu li:hover{
background: red;
}

Yukarıdaki CSS Kodunun LESS karşılığı aşağıda yer almaktadır.

.menu{
border: 1px solid #ddd;
li{
float:left;
&hover{
background:red;
}
}
}

Yukarıda belirtilen şekilde kod yazıldığında fazladan kod kalabalığından kurtulmuş olunacaktır buda daha az kodla daha okunabilir CSS dosyalarının yazılmasını sağlayacaktır. Ayrıca yukarıdaki belirlen & simgesi kendi üstündeki kodların tümünü referans almaktadır. Hover, focus gibi işlemlerde bu yöntem sıklıkla kullanılmaktadır.

Matematiksel İşlemler

LESS ile rahatlıkla dört işlem yapabilirsiniz. Bunun en basit örneği aşağıdaki gibidir.

.deneme{
margin: 100px / 4;
}

.deneme{
margin: ( 100% – 6) /2;
}

Yukarıda belirtilen kodlar bu şekilde kullanıldığında sizlere saçma geliyor olabilir. Önemli olan bunları doğru zamanda doğru yerde kullanmak.

Hazır Tanımlı Fonksiyonlar

LESS dilinde tanımlı birçok fonksiyon vardır. Bu fonksiyonlar arasında yer alan faout fonksiyonun kullanımını aşağıdan inceleyebilirsiniz.

.deneme{
background: fadeout(red, 60%);
}

Yukarıda belirlen bu fonksiyon kırmızı rengini %60 daha şeffaf bir hale getirmektedir. Fadeout fonksiyonun yanı sıra birçok hazır tanımlı fonksiyon vardır. Bunları LESS ön işlemcisinin resmi sitesinden dokümanlara gelerek inceleyebilirsiniz.

hakkında Alper Acarlı

Acarnet'te Entrepreneur

Bu Yazıya da Bakabilirsiniz

Bootstrap Nedir? Bootstrap Site Yapımı

O bir açık kaynak kodlu tasarım harikası, CSS Freamwork ustası, tasarım denilince akla ilk o …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir