Less Css Ders-3 Fonksiyonlar - Mixins
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Less Css Ders-3 Fonksiyonlar - Mixins

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1896)
RAPOR ET
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;) }



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol