Less,Css işlemlerini kolaylaştırır.Less üzerinden matematiksel işlemler yapılabilir,mixin vs gibi değerler kullanılabilir,değişken tanımlanabilir.
Kurulum--
Kurulumu cdn üzerinden anlatacağım.</head> etiketi üstüne;
yapıştrmanız yeterli.
Kullanım--
Aynı şekilde bir less dosyamızı dahil edelim..
Örnekler--
Değişken oluşturmak için değişken başına @ koyuyoruz.
İç içe yazım
Less'de kolaylaştıran yöntem budur.Css de ayrı ayrı tanımlamak yerine less'de alt alta yazılabilir.
Fonksiyonların Kullanımı..
Örnek olarak bir rengi karartmak,aydınlatmak gibi fonksiyonları less ile yapabileceğiz.
Bu kodumuzda da input class'ının background değerini inputBg değişkeninin değerinin %20 karartılmış olarak belirledik...
Devamı için:
Mixin Kullanımı
---
İlk önce bu parametrenin amacından bahsedeyim..
Bildiğiniz gibi bazen bazı kodlar da kullanılan şeyler bazı yerlerde de aynı olduğu için yazarken zorlanıyoruz.
Artık bunun ile bir kod içeriğimizi başka içerikde çağırabiliyoruz.
Hadi bunu daha yakında görelim.
Kurulum--
Kurulumu cdn üzerinden anlatacağım.</head> etiketi üstüne;
HTML:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>Kullanım--
Aynı şekilde bir less dosyamızı dahil edelim..
HTML:
<link rel="stylesheet/less" type="text/css" href="main.less" />Örnekler--
Değişken oluşturmak için değişken başına @ koyuyoruz.
Less:
@bg: #FFF;
#header{
background:@bg;
}İç içe yazım
Less'de kolaylaştıran yöntem budur.Css de ayrı ayrı tanımlamak yerine less'de alt alta yazılabilir.
Less:
//Normalde
.category{
background:#000
}
.category ul li{
float:left;
margin-right:10px;
}
.category ul li a{
color:#000;
}
.category ul li a:hover{
color:red;
}
//Less ile
.category{
background:#000;
ul li{
float:left;
margin-right:10px;
a{
color:#000;
&:hover{color:red;}
}
}
}Fonksiyonların Kullanımı..
Örnek olarak bir rengi karartmak,aydınlatmak gibi fonksiyonları less ile yapabileceğiz.
Less:
.input{
background: darken(@inputBg, 20%);
}Bu kodumuzda da input class'ının background değerini inputBg değişkeninin değerinin %20 karartılmış olarak belirledik...
Devamı için:
Ziyaretçiler için gizlenmiş link, görmek için
Giriş yap veya üye ol.
Mixin Kullanımı
---
İlk önce bu parametrenin amacından bahsedeyim..
Bildiğiniz gibi bazen bazı kodlar da kullanılan şeyler bazı yerlerde de aynı olduğu için yazarken zorlanıyoruz.
Artık bunun ile bir kod içeriğimizi başka içerikde çağırabiliyoruz.
Hadi bunu daha yakında görelim.
Less:
.radius{
border-radius:50%;
}
.block-header{
.radius;
color:white;
}
//Çıktı
.block-header{
border-radius:50%;
color:white;
}
.
