Less Nedir , Nasıl Kullanılır

less-logo

Less Nedir , Nasıl Kullanılır

LESS CSS yazmanızı bir adım öteye taşıyacak,  eğlenceli  ve kullanışlı hale getirecek bir araçtır…Ayrıca kodların daha düzenli ve anlaşılır bir biçime okunmasında da önemli bir katkı sağlar.

LESS ile değişkenler tanımlayabiliriz, mixinler oluşturabilir, tanımlı fonksiyonları kullanabilir, matematiksel hesaplar yapabiliriz…

Kısaca açıklayacak olursak margin: 20px; diye tanımlayacağımız kuralı margin: @degisken; diye tanımlıyoruz  veya margin :5px demek istiyorsak margin: @degisken/2; diye tanımlama yapabiliyoruz.

E zaten Css yazıyorum kardeşim ne yapacağım ben lessi diyor gibisiniz, Hadi birlikte less neler yapabiliyor öğrenelim görelim…

Başlangıç ve Kurulum…

Herhangi bir kurulum yapmadan  sadece JavaScript dosyasını sayfamıza dahil ederek başlayacağız.
http://lesscss.org/ adresine girerek js dosyasını indiriyoruz. Ya da direk linki alıp kullanabilirsiniz sizin paşa gönlünüze kalmış.

Not: Eğer less yazmak için bir derleyeciye sahip iseniz  bu js dosyasına da ihtiyacınız yoktur.

<link rel=”stylesheet/less” href=”seribilgi.less”>
<script src=”js/less.js”></script>

LESS ile CSS yazmaya başlayabiliriz!

Değişkenlerin Kullanımı

Öncelikle değişken oluşturmak için  @ koyup değişken adını yazıyoruz. Değer atamak için ise : işaretini kullanıyoruz.

@renkgenel:
#000000;

@renkgenel adında bir değişken oluşturduk.bu değişkeni less ile şu şekilde kullanıyoruz;
.seribilgi {
color: @renkgenel;
}
Gördüğünüz gibi sadece seribilgi adlı klasıma yazı rengi olarak oluşturmuş olduğum @renkgenel klasındaki değeri atadım yani bir diğer deyişle #000000 hex kodunu vermiş oldum. Bu oluşturduğum renk adlı değişkeni istediğim her yerde kullanmak için sadece @renkgenel değerini stillere atamam yeterli olacak.

Mixin Kullanımı

Mixinler için şu tanım yanlış olmaz sanırım mixin bir tür fonksiyondur,  CSS yazarken bir çok kodu  başka  yerde kullanmak için kopyala  yapıştır yapmamıza sebep olur ve satır sayısını fazlasıyla artırırdı ama mixinler sayesinde daha az kod yazmak mümkün.

Hemen bir örnek yapıyoruz;
.seriborder {
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
}
.deneme {
color: red;
.seriborder;
}

Bu işlemin css çıktısına bakalım şimdide;

.deneme
{
color: red;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
}
Çok güzel değil mi ? Şimdi oluşturduğumuz bir mixine nasıl parametre gönderiyoruz ona bakıyoruz hemen;
.relative (@right, @bottom: 20px){
position: relative;
right: @right;
bottom: @bottom;
}

.deneme{
.relative(100px, 25px);
}
Ne yaptık right ve bottom adında 2 parametre gönderdik. Oluşturduğumuz mixinde parametreler 20px iken biz burada .relative klasındaki right ve bottom’un değerini 100px le 25px olarak girdik.
Anlayamayanlar sanırım css çıktısını verince daha iyi bir fikre sahip olacaklar;

.deneme{
position: absolute;
right:100px;
bottom:25px;
}
Eğlenceli bir hal almaya başladı değil mi?

İçiçe Kurallar / Nesting Items 

LESS ile iç içe olan elemanlara yazmak bile çok daha kolay bi hal alıyor öyleki  css de hover, focus, active gibi işlemler için yeniden tanımlamak gerekir ama LESS’de içiçe yazım kuralı vardır bu çok daha kolaydır.

Hemen Örneği yapıyoruz ;

CSS 

ol{
padding:20px;
font-size:16px;
}

ol li{
margin:5px 8px;
color:black;
}

ol li a{
color:red;
}

Şimdi Bunu LESS İle yazıyoruz 

ol{
padding:20px;
font-size:16px;

 li{
margin:5px 8px;
color:black;

  a{
color:red;
}
}
}

Gördüğünüz üzere less ile iç içe yazdık ve çok daha kullanışlı oldu.

 

Fonksiyonlar ve Kullanımları

LESS’in fonksiyon desteği bir programlama dili gibi, sunduğu bir çok fonksiyon var  aklımızda kalacak ve sıklıkla kullanacağımız fonksiyonlar.

Bir örnek verelim hemen ;

.seribilgi{
background: darken(red, 60%);
}

LESS’in bize sunduğu darken() fonksiyonu sayesinde kırmızı rengimizin %60 daha koyu halini elde ettik. Elbetteki LESS’in bir çok foksiyonu mevcut örneğin darken yerine lighten foksiyonu kullansaydım bana kırmızı rengin %60 şefaf halini çıktı olarak vermiş olacaktı.

 

İşlemler/Operations

LESS içerisinde Matematiksel işlemler de yapabiliyoruz.

Çok basit örnekleyelim hemen;

@yukseklik: 300px;
seribilgi{
height:@yukseklik+ 100;

}

Böylece seribilgi clasımıza 400px yüksekliğini vermiş olduk.

Bu yazımızda sizlere LESS’i anlatmaya çalıştık ummarım bir nebze olsun bunu başarmışızdır. Takıldığınız yerler olursa yorum yazarsanız elimizden geldiğince sizlere yardımcı olmaya çalışırız. 

3 yorum

  1. “Çok basit örnekleyelim hemen;

    @yukseklik: 300px;
    seribilgi{
    height:@genislik + 100;
    }

    Böylece seribilgi clasımıza 400px yüksekliğini vermiş olduk.

    Bu yazımızda sizlere LESS’i anlatmaya çalıştık ummarım bir nebze olsun bunu başarmışızdır. Takıldığınız yerler olursa yorum yazarsanız elimizden geldiğince sizlere yardımcı olmaya çalışırız. ”

    Yukarıdaki son örnekte genislik değişkeni yerine yukseklik kullanılmayacakmıydı? Emeğine sağlık teşekkürler

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.