Less Css Ders-2 Değişkenler
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-2 Değişkenler

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



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