Less css serimize kaldığımız yerden devam ediyoruz.Bu derste mixins sistemini anlatacağım.
Mixins fonksiyon gibi işler.Dinamik dillerden birini öğrendiyseniz fonksiyonun ne olduğunu biliyorsunuzdur.Bilmeyenler için açıklayayım.Bir isim altında bir alan oluşturup bu isim altında veri yollayıp orda işlem yaparız ve geri dönüş alırız.Veri yollamak zorunlu değildir.Bu şekilde bir çok aynı işlem olacak alanı tek bir yerde yaparız.
İndir : http://ustaderslik.com/dosya/less_ornek_2.zip
İnceleme : http://ustaderslik.com/ornek/less_ornek_2/
Mixins 2 çeşit fonksiyon var.Biri bizim yarttığımız biride hazır.Hazır dediğim şu.Örneğin logo clasına erişip stil verdik.Bu verdiğimiz tüm değerler .logo() fonksiyonu altında saklanır.Bunu istediğimiz bir objeye atayabiliyoruz.Şimdi kodlarla bakalım dediklerimize.
1-Hazır Fonksiyonlar
Less dosyasında onjelere atadığımız tüm özellikler o isim altında saklanır.Yukarıda da değinmiştim.Bu özellikleri başka bir objeye atayabiliyoruz.Atama işlemini
class seçicisi+().Örnek .logo(); gibi.Şimdi bir örnek yapalım.
.isim{background:red;}
.footer{ .isim(); }
yukarıda isim clasına ait objenin stlini değiştirdik.ardından footer clasına ait objeyi seçip isim clasına ait özellikleri atadık.Bir çok clası birden atayabiliriz.
.footer{ .isim(); .logo(); }
şeklinde.
2-Fonksiyon Yaratıp Kullanma
Şimdi fonksiyon yaratıp kullanmaya bakalım.
.class(@veri1;@veri2;@veri3...){ işlemler }
Sistemi biraz inceleyelim.Önce her hangi bir isim altında class yaratıyoruz.Ardından veri alacaksak bunları parantezler içinde değişkenlere atıyoruz.İstediğimiz isimde değişken yaratabiliriz.Ardından css kodlamamızı yapıyoruz.Bu değişkenleride kullanabiliriz.Şimdi bir örnek yapalım.
.boyut(@px){
font-size:@px;
}
.logo{ .boyut(15px) }
Ne yaptık ona bakalım.Boyut adında fonksiyon oluşturup bir değer aldık.Bu değeride font-size ye atadık.Ardından logo clasına ait objede boyut fonksiyonunu çağırıp 15px değerini yılladık.Bu şekilde logodaki metinlerin boyutunu 15px olarak ayarladık.
Temel kullanımı bu şekilde.Şimdi örneğe geçelim.
Genel örnek :
index.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link type="text/css" rel="stylesheet/less" href="tasarim.less" />
<script type="text/javascript" src="less-1.7.0.min.js"></script>
</head>
<body>
<div class="a">Alan -a-</div>
<div class="b">Alan -b-</div>
<div class="c">Alan -c- <div class="c2">Alan -c2-</div> </div>
<br /><br />
<div class="birlesim">a ve b nin stil özelliklerinin birleşimi.</div>
<div class="birlesim2">c ve c2 nin stil özelliklerinin birleşimi.</div>
<div class="atama">Fonksiyon yaratıp atama</div>
</body>
</html>
tasarim.lass
/*Özellik atama*/
.a{color:red;}
.b{font-size:25px;font-family:Tahoma;}
.c{
color:#666;
.c2{ color:#fff; background:#666; }
}
.birlesim{
.a();
.b();
}
.birlesim2{
.c>.c2();
/*
bir alt nesnenin özelliklerini 4 şekilde atarız.
.c>.c2
.c>c2()
.c.c2
.c.c2()
*/
}
/*Fonksiyon*/
.cerceve(@renk;@kalin;@stil:dotted){ border:@kalin @renk @stil; }
.atama{ .cerceve(red;10px;) }
UstaDerslik
