LESS Nedir? Nasıl Kullanılır? LESS Dersleri

-- CSS3 & HTML5

LESS Nedir? Nasıl Kullanılır? LESS Dersleri

LESS Nedir?

LESS, CSS yazımınızı kolaylaştıracak,hızlandıracak ve işlevselleştirebilecek bir araçtır, LESS ile değişken tanımlayabilir, fonksiyon ve mixin oluşturabilir, matematiksel işlemler yaptırabilirsiniz.

Ek Olarak LESS e alternatif SASS ve Stylus gibi alternatif araçlarda mevcut.

 

LESS Nasıl Kullanılır?

LESS in farklı şekilde kurulumları mevcut örneğin komut satırından kurulum yapabilirsiniz.  Veya Compiler (Derleyici) aracı indirip LESS dosyanızı derleyebilirsiniz. (Önerim: Koala App). Bide son olarak Kurulum yapmadan JavaScript dosyasını sayfaya dahil ederek kullanabiliriz bunun için http://lesscss.org adresine gidelim ve js dosyasını indirelim veya CDN den de alabilirsiniz. Kullanımı aşağıdaki gibidir.

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

 

Değişken Oluşturmak 

LESS de Değişken oluşturmak oldukça basit, başına @ işareti koyup değişken adını yazıyoruz kullanımı ve çıktısı aşağıdaki gibidir.

@renk: #333;

/* Kullanım */
#header {
  color: @renk;
}

Çıktısı

#header{
  color:#333;
}

 

İç İçe Kurallar

CSS Preprocessor ler (Ön-derleyiciler) de en sevdiğim özelliklerden biri olan iç içe yazım kurallarıdır. Örneğin bir menü yaptığımızı düşünelim normal CSS yazarken .menu için ayrı kural, sonrasında alt satıra inip .menu ul li için ayrı kural, hover, focus vs. için ayrı kurallar yazmamız gerekiyor. Ama LESS`de bundan kurtulmuş oluyoruz. Altta kullanımını görebilirsiniz.

Normal CSS yazarken; 

.menu{
  background:#000
}
.menu ul li{
  float:left;
  margin-right:10px;
}
.menu ul li a{
  color:#000;
}
.menu ul li a:hover{
  color:red;
}

LESS kullanırken; 

.menu{
  background:#000;
  ul li{
    float:left;
    margin-right:10px;
    a{
      color:#000;
      &:hover{color:red;}
    }
  }
}

 

Mixin Kullanımı

Mixinler (fonksiyonlar da denilebilir) her projede yeniden yazmak zorunda olduğumuz işlemler için kullanılır. Örneğin border-radius için bir mixin oluşturalım. Aşağıdaki örnekte de görebileceğiniz gibi kullanımı oldukça basit .mixinadı(nokta ile başlamak zorunda) şeklinde oluşturuyoruz ayrıca mixin oluştururken parametre değeri vermeniz zorunlu değil. Bu mixinin kullanımı .radius(30px); şeklindedir.

.radius(@size){
    border-radius: @size;
}

 

Fonksiyonların Kullanımı

Less de bir çok fonksiyon mevcut bunların hepsine buradan ulaşabilirsiniz. Bu fonksiyonları kullanarak gerçekten daha hızlı ve eğlenceli CSS yazabilirsiniz.

Aşağıdaki örnekte yazı rengimizi kırmızının %20 koyusu olarak belirttik.

body{
  color: darken(red, 20%);
}

Son olarak değinmek istediğim konu matematiksel işlemler Less de bu işlemler içinde fonksiyonlar mevcut buradan inceleyebilirsiniz.

Aşağıdaki örneğin çıkışı width:50% şeklindedir.

.kutu{
  width:percentage(0.5);
}

Daha sonra çok daha detaylı bir makale hazırlayacağım.