Less serimizde özellikleri işlemeye başlıyoruz.İlk olarak
değişkenleri işleyeceğiz.Öncelikle değişkenin tanımını bilmeyenler için anlatayım.Değişkenler içinde veri taşıyan ve istediğimiz zaman içeriğini değiştire bildiğimiz şeylerdir.Less de değişkenlerde seçici isimleri,özellik isimleri,özellik değerleri,url gibi bir çok şeyi depolayabiliriz.
İndir : http://ustaderslik.com/dosya/less_ornek_1.zip
İncele : http://ustaderslik.com/ornek/less_ornek_1/
1-Değişken Yaratma
@değişken_isim:değişken değeri;
Değişkenleri bu yapı içinde yaratıyoruz.Bir örnek yapalım.
@font:15px;
.logo{font-size:@font;}
Değişkenleri çağırmak için 2 yöntemimiz var
@değişken_ismi @{değişken_ismi} .Normal özellik atarken süslü parantezli kullanmayız.Seçici isimleri,Özellik isimleri ve url atarken süslü parantezi olanı kullanırız.
2-Değiken Kullanımları
Değişkenleri bir kaç yerde kullanabiliyoruz.Şimdi bunlara bakalım.
a-seçici
Yarattığımız değişkenleri seçici ismi olarak kullanabiliriz.Örnek :
@logo:logo_ismi;
.@{logo}{ color:red; }
Yukarıda logo_ismi clasına ait alanın font rengini değiştirdik.Bu şekilde seçicileri değişkene bağlayabiliriz.
b-özellik
Css de kullandığımız color,font vs gibi özellikleri değişkenlere atayarak bunları kullanabiliriz.
@fs:font-size
.logo{ @{fs}:15px; }
c-url
İmport,background-image gibi özelliklerde kullandığımız urlleri değişkenlere atayarak kullanabiliriz.
@logo:resim/logo.png
background-image:url("@{logo}");
d-özellik değeri
Css de özelliklere atadığımız tüm değerleri değikenlere atayarak kullanabiliriz.Örnek renk,font boyutu gibi vs.
@renk:#d12c69;
.alan{background:@renk;}
3-Değişken Değeri Değiştirme
Değişkenlerin değerlerini istediğimiz zaman değiştirebiliriz.Değiştirmek için değişkene yeni değer vermemiz gerek.
@font:15px;
@font:50px;
Değişkenlerde en alta bulunanın değeri geçerlidir.Burada fon değişkenin değeri 50pxtir artık.
4-Değiken Aktarma
Bir değişkenin değerini başka bir değişkene aktarabiliriz.Bunun için 2 yöntem var.İlk yönteme bakalım.
@renk:black;
@yenirenk:@renk;
Burada yeni rengin değeri artık black oldu.İkinci yönteme bakalım.
@renk:black;
@yenirenk:"renk";
.logo{color:@@yenirenk}
Yenirenk değişkenine renk adlı değişkenin ismini yazdık.Yenirenk değişkeninide çağırırken 2 @yazdık.Bu yöntem biraz kullanışsız.İlk yöntem tercihimdir.
Not : Bir değişken yaratıp onu kullandıktan sonra ,altta değişkenin değerini değiştirirseniz o değer etkili olur.Normal dillerde alta değiştirdiğimiz üstü etkilemez ama burada etkiler.
Genel örnek :
index.html
<!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="isim"></div>
<div class="alan"></div>
</body>
</html>
tasarim.less
/*Değişkenler*/
@kirmizi:red;
@font:50px;
@secici:isim;
@resim:"resim.jpg";
@genislik:width;
@metin:"cArleone";
@metin:"-cArleone-";
@yaz:metin;
.@{secici} {
color:@kirmizi;
font-size:@font;
}
.@{secici}:before{
content:@@yaz;
}
.alan{
@{genislik}:300px;
height:200px;
background-image:url("@{resim}");
background-size:300px 200px;
}
@metin:"---cArleone---";
UstaDerslik
