less css dersleri ve anlatım

Less nedir, nasıl kullanılır?

Merhabalar. Benim de kullanmayı yeni öğrendiğim css derleyicilerinden less hakkında  kısa  makaleler sunup, hem kendi notlarımı almak, hem de sizlere  faydalı olması açısından bilgiler sunmak için bu seriyi hazırlamak istedim.

Öncelikle less nedir? 

Less css yazımımızı hem kolaylaştırmak, hem de eğlenceli hale getirmek için bir araçtır. Less ile  değişkenler oluşturabilir, mixinler hazırlayabilir, fonksiyonlar oluşturabilir ve bir takım matematiksel hesaplamalar yapabiliriz. Benim en çok sevdiğim özellikleri, iç içe css yazımı ve mixinler, değişkenler oluşturup kullanmaktır.  Mesela diyelim ki , Siyah renk ağırlıklı bir web sitesi yaptınız, ve değişik renklerde  nasıl göründüğünü merak ettiniz veya renklerde  oynamanız gerekti. Saf css ile bunu yapmak için her css bloğuna gelip renk kodunu bularak değişiklik yapmanız gerekli ve css blogları ne kadar fazla ise sizi o kadar uğraştıracaktır ve vaktinizi alacaktır. Less de ise, daha önceden oluşturduğunuz tanımlı renk değişkeninde değişiklik yapmanız yeterli olacaktır. Yani tek bir satırda renk kodunu değiştirin, tüm tasarımınız değişsin? kulağa çok hoş geliyor olmalı 🙂

less nasıl projeye dahil edilir ve kullanılır?

Öncelikle buraya tıklarsanız less’in kendi web sitesine giriş yapar ve daha geniş özelliklere ulaşabilirsiniz.  Buradan direkt download  sayfasına  girebilirsiniz. İndirme ekranında sizlere  bir takım seçenekler sunulmuş, bunlardan birisi kopyala yapıştır olarak js dosyasına sahip olabilirsiniz. Diğer ise indirme yaparak. Kopyala yapıştır ile  fazla uğraşmak yerine “Download Source Code” Seçeneğinden less.js ‘yi indirin. Projenizde ayrı bir less klasoru oluşturun ve içine atın. Aynı kalsörün içine bir de “style.less” dosyası oluşturun. Bu dosyayı oluşturma konusunda bilginiz var sanırım, yoksa da bir text dosyası oluşturun ve style.less yazarak kaydedin dosyanın formatı değişecektir zaten. Bir sonraki işlem ise lessi projeye dahil etmek olacaktır.

Less’i  projeye dahil etme:

less-nedir-less-nasil-kullanilir-resimli-anlatim

Yukardaki örnekten anlaşılacağı üzere, İlk olarak style.less dosyası daha sonra  kendi sitesinden indirdiğimiz js dosyası eklenecek. Ve birazdan anlatacağım değişkenler, mixinler, fonksiyonlar kısacası css kodlarını “style.less” dosyasına yazacağınızı unutmayın.

 


Özelliklerine giriş ve açıklamalar; 

Değişkenler;

Altta bir değişken oluşturuk ve içerisine renk kodunu atadık.

@renk: #f00; 

@bgcolor: #000;

@baslikRenk: #fff;

Sıra geldi bir css bloğunda  kullanmaya;

.test {

color: @renk;

background-color: @bgcolor;

}

Değişkenleri bu şekilde  kullanıyoruz. Mesela tasarımda kullanacağınız renkleri bu şekilde değişkenlere  atayın ve daha sonra istediğiniz yerde  kullanın. Gerektiği zaman  @renk değişkenindeki renk kodunu değiştirirseniz, nerede kulanmışsanız hepsi değişecektir. Büyük kolaylık! 🙂

 


Mixin kullanımı;

Mixinler bir nevi hazırlanmış fonksiyonlara benzer ve bizim css yazımımızı kolayaştırmak için vardır. Örneğin hala bazı css3 kodları her tarayıcıda  çalışmamaktadır. Bunun bir takım -prefix- (ön ekler) kullanmak zorunda  kalırız. -moz-, -webkit-, -o-  gibi ön ekler  kullanılarak cross browser işlemlerimizi yapıyoruz. Fakat bunları her defasında  yazmak zahmetli ve vakit kaybettirici. Şimdi birlikte “box shadow” özelliğini bir mixine atayalım ve kullanımına  bakalım.

.kutuGolge {
	box-shadow: 1px 1px 5px #000;
	-moz-box-shadow: 1px 1px 5px #000;
	-webkit-box-shadow: 1px 1px 5px #000;
	-o-box-shadow: 1px 1px 5px #000;
}

.test-div {
	color: #000;
	background-color: #fff;
	.kutuGolge;
}

Yukarda kullanılan mixinin ekrana çıktısı şu şekilde  olacaktır;

.test-div{
	color: #000;
	background-color: #fff;
	box-shadow: 1px 1px 5px #000;
	-moz-box-shadow: 1px 1px 5px #000;
	-webkit-box-shadow: 1px 1px 5px #000;
	-o-box-shadow: 1px 1px 5px #000;
}

 

İçiçe css yazımı; 

Lessin en sevdiğim yanlardan birisi de  bu, içiçe css yazımıdır. Css yazımınızı oldukça kolaylaştırır ve classları tekrar tekrar yazmanızı sona erdirir. Örneğin .test{} adında  css bloğunuzu doldurdunuz ve hover atamak istiyorsunuz .test:hover {} gibi tekrar css blogları açmanıza gerek kalmayacak.

Şimde diyelim ki,  content-title adında  bir divimiz var ve içinde paragraf etiketi hatta 1 tane de span etiketi olsun, bunlara css yazalım.

Normal bir şekilde  css kullanımı

.content-title {
	color:red;
}

.content-title p{
	color:black;
}

.content-title span{
	color:yellow;
}

.content-title:hover{
	box-shadow: 0 0 5px red;
}

Less ile içiçe css yazımına  bakalım hemen; 

@renk1: red;
@renk2: yellow;
@renk3: black;
.content-title {
	color:@renk1;
	
	p {
	color:@renk3;
	}
	
	span {
	color: @renk2;
	}
	
	&:hover{
	box-shadow: 0 0 5px @renk1;
	}
}

Gördüğünüz gibi css blogunun içinde iken yazmaya başladım ve daha zahmetsiz olduğu gibi daha az yer kapladı. Aynı zamanda  renk değişkenlerimizi tanımladık ve kullanımına  bir kez daha değinmiş olduk 🙂 :hover , :active :before gibi seçicileri kullanmak için başına &: eklemeyi de unutmuyoruz.


Less hazır fonksiyonlar

Lessin kendi sitesinde  oldukça fazla  hazır fonksiyonlar mevcut. Ben sürekli kullandıklarımız arasında olanlara değineyim biraz. http://lesscss.org/functions/  Sitesinden fonksiyonların tamamına  erişebilirsiniz.

Fade (renk saydamlığı)

Rgb(a) kullanarak yaptığımız saydam arka planları bu fonksiyon ile halledebiliriz. Aşağıda bir renk değişkenine siyah ren kodunu attıktan sonra background özelliğinde  kullandık ve “fade” fonksiyonu ile 50% saydamlık yarattık.

@siyah: #000;

.div {
	color: red;
	background: fade(@siyah, 50%);
}

 

Lighten (Renk açıcı)

Lighten fonksiyonu, herhangi bir rengin tonlarını açarak bize renk çeşitliliği sağlar.

@kirmizi: #f00;

.div {
	color: red;
	background: lighten(@kirmizi, 30%);
}

 

Multiply(renk karıştırıcı)

Bu fonksiyonumuz ise, 2 rengi alıyor ve birbirine karıştırıp ortak bir renk tonu sunuyor bize 🙂 Değişik bir olay, nerede veya neden kullanacağınız size kalmış artık 🙂

@kirmizi: #f00;
@siyah: #000;

.div {
	color: red;
	background: multply(@kirmizi, @siyah);
}

Aşağıdaki örnek de size ne işe yaradığına karşı bilgilen sunmaktadır.

less-fonksiyon-kullanim-resimli-anlatim


 

Less compiler nedir ve ne işe yarar? 

Less compiler kullanarak css dosyalarınızı sıkıştırabilir ve web sitenizin daha  hızlı açılmasını sağlayabilirsiniz. Bu konu her editör için farklı olacağı için ayrı bir konu olarak eklemeyi düşünüyorum. less ile css bağlantınızı yaptıktan sonra otomatik kendisi yazdığınız kodları sıkıştırıp css dosyanıza  alacaktır. Projeniz bittiği zaman less.js veya style.less dosyaları ile bir işiniz kalmayacak projenizden kaldıracaksınız ve  size sunulan  style.css (sıkıştırılmış) dosyasına sahip olacağınız için onu kullanacaksınız.

Less ön izleme penceresi;

Less’in en sevdiim özelliklerinden birisi de çalışmalarımızı sürdürürken anlık olarak bir ön izleme penceresinden takip edebilmek. Yani bir dive arkaplan verip kaydettiğiniz zaman, arka planda açık olan bir pencereden yenilemeye gerek kalmadan değişiklikleri görebileceksiniz. Bir nevi dreamweaver da olduğu gibi ama bunun farkı tarayıcıda yapabilmek 🙂 Bunu kullanabilmek için adresin sonuna alttaki kodları yazmanız yeterlidir.

Örnek kullanımı;

/index.php#!watch'

/index.html#!watch'

 

Kolay gelsin arkadaşlar 🙂

bulut Aylak

Full-stack web developer, Search engine optimization meraklısı, çakma filozof ve blogger.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir