LESS nedir? Nasıl yazılır?

Tasarımcının kodla haşır neşir olduğu ender dillerdendir CSS. Çoğu zaman keyif verici bir dil olsa da büyük projelerde, satır sayısı binleri aştığında can sıkıcı bir hal alabiliyor. Bunun sebebi de çoğu zaman aynı kodları birden fazla yerde kullanmak durumunda kalıyor olmamız.

En ufak bir yazı tipi veya renk değişikliği için bile özgün tanım yapmamız gerekiyor. Peki buna mecbur muyuz? Tabii ki hayır.

LESS daha hızlı ve kolay CSS yazabileceğimiz bir araç. İsmi genellikle SASS ve Stylus gibi benzer araçlarla birlikte anılan bu araç front-end development tarafında işleri fazlasıyla keyifli hale getiriyor.

Sunduğu kolaylıklardan öne çıkanlar şöyle;

En büyük kolaylıklarından biri değişken tanımlama olarak gösterilebilir. Örneğin projenize @yazirengi diye bir renk tanımladınız. Daha sonrasında bu değişkeni tüm stil tanımlamalarınızda kullanabilirsiniz. İlerde değiştirmek istediğinizde de hepsini birden yönetmeniz mümkün oluyor. Günümüzde CSS’e de bu yapının geleceği konuşulmakta.
CSS’e gelen calc tanımından çok daha gelişmiş hesaplama araçlarımız da LESS sayesinde kullanılabilir oluyor.
Mixin yapısı sayesinde de stillerin tekrar veya bir arada kullanımı mümkün kılınıyor.
Fonksiyon desteğiyle de aynı jQuery tanımlamalarına benzer stil ayarlamaları yapabiliyoruz.

1. Başlangıç ve Kurulum Aşaması

LESS sadece tarayıcı veya node.js üzerinden çalışan bir JavaScript yazılımıdır. Kullanımında ise iki ayrı yöntem önerilmekte.

1. Yöntem : LESS.JS Kullanımı

Bu yöntem LESS’in kendi web sayfasında da tarif edilen, LESS dosyalarınızın altına ekleyeceğiniz bir JS dosyası sayesinde tüm stil tanımlanırız gerçek zamanlı olarak işlenir ve çalışır hale gelir. Kullanımı kolaydır. Ancak kimi zaman verimsiz olabilir. Çünkü sitenize giren kullanıcının tarayıcısı daha fazla işlem yapmak zorunda kalır.

Web sayfanıza aşağıdaki satırları eklemek yeterli. Burada önemli nokta stillerimizi içeren LESS dosyaları JS dosyasının üstüne olmak durumunda.

	<link rel="stylesheet/less" href="style.less">
	<script src="less.js"></script>

JavaScript dosyasını indirmek için buraya göz atabilirsiniz.

2. Yöntem : LESS dosyalarını CSS olarak derlemek

Projenizi LESS ile yazdıktan sonra canlıya geçme aşamasında tüm LESS dosyaları CSS’e çevrilebilir ve o haliyle yayınlanabilir. Böylece sadece development aşamasında değil site hızı tarafında da hız kazanılır. Online olarak LESS’den CSS’e kod çevirimi yapan birçok araç mevcut. En popülerlerinden biri de LESS2CSS.

Eğer canlıya geçerken LESS dosyalarınızı CSS‘e çevirip yayınlarsanız less.js‘ye ihtiyacınız kalmaz.

2. Variables (Değişkenler)

LESS’in en seveceğiniz özelliklerinden biri de değişken tanımına müsade ediyor olması. Örnek olarak arkaplan, yazi ve border için bir renk tanımlayalım ve bunu bir paragraf için aktif kılalım.

@arkaplan: #000;
@yazi: #CCC;
@border: #444;

p{
	background-color: @arkaplan;
	color: @yazi;
	border:1px solid @border;
}

Üstteki gibi renk değişkenleri tanımlamak işimizi fazlasıyla kolaylaştırıyor. İleride bu renklerden birini değiştirmek istediğimizde yapmamız gereken tek şey değişkenin kendi tanımını düzenlemek.

3. Mixins (Stil Birleştirmeleri)

Mixins yapısı sayesinde daha önce başka bir class için tanımladığımız stil seçeneklerini bir başka eleman için de kullanılabilir kılıyoruz. Normal CSS yazarken bu işlem bir çok kodu copy paste yapmamıza sebep olur ve satır sayısını fazlasıyla arttırırdı.

Bu da ilginizi çekebilir CSS ile Alıntılarınızı Şekillendirin

Örneğin normal CSS ile iki class tanımlayalım. İkinci stilimizin birinci stilin tüm özellikleri taşımasını istiyoruz.

.a{
	padding:10px;
	margin:20px;
}

.b{
	border-radius:100%;
	text-align:left;
	padding:10px;
	margin:20px;
}

Gördüğünüz gibi padding ve margin tanımlarını .a‘yı kopyalamak durumunda kaldık. Ama LESS tarafında bu işi yapmak çok kolay.

.a{
	padding:10px;
	margin:20px;
}

.b{
	border-radius:100%;
	text-align:left;
	.a
}

Böylece sadece .b‘yi çağırmak, padding ve margin tanımlamalarını geçerli kılmak için yeterli olacaktır. Gelin şimdi işi biraz daha abartalım.

HTML’de bir elemana bu iki class’ı tanımlamanız da aynı sonucu verecektir. Örn : <p class=”a b”></p>

Bu sefer hazırlayacağımız örnekte de padding ve margin tanımlamaları yine gelsin, ancak istediğimiz değerde olsunlar. İlk olarak a classını tekrar tanımlayalım.

.a(@pad:10px,@mar:20px;){
	padding:@pad;
	margin:@mar;
}

Böylece eğer pad ve mar tanımları değiştirilmeden çağrılırsa 10px ve 20px değerler aktif olacaktır. Şimdi bu tanımı başka bir elemanda farklı değerde çağıralım.

.b{
	border-radius:100%;
	text-align:left;
	.a(40px,80px)
}

Böylece oluşturacağımız bir b classlı eleman 40px padding ve 80px margin değerlerine sahip olacaktır.

4. Nesting Items (İç içe elemanlar)

İç içe olan elemanları tanımlarken de işler kolaylaşıyor. Eskiden olduğu gibi uzun selectorler yazmamıza artık gerek yok. Örneğin aşağıdaki gibi bir HTML kodumuz olsun.

<ul>
	<li>1. Öğe</li>
	<li>2. Öğe</li>
	<li>3. Öğe <a href="#">Detaylar</a></li>
</ul>

Bu elemandaki her bir tanımı stilize ederken aşağıdaki yolu izleyebiliyoruz.

ul{
	margin:20px;
	font-size:14px;
	
	li{
		padding:5px 8px;
		color:green;
		
		a{
			color:blue;
		}
	}
}

Eğer bunu normal CSS ile yazacak olsaydık ya da bu LESS kodunu CSS’e convert edecek olsaydık karşılaşacağımız sonuç şu olacaktı :

ul{
	margin:20px;
	font-size:14px;
}

ul li{
	padding:5px 8px;
	color:green;
}
	
ul li a{
	color:blue;
}

5. Operations (Dört İşlem)

LESS içerisinde çarpma, bölme,toplama ve çıkarma işlemleri de yapabiliyoruz. Beraber bir örnek hazırlayalım.

@genislik:220px;

div{
	width:@genislik - 100;
}

Böylece 120px genişliğinde bir div hazırlamış olduk.

6. Functions (Fonksiyonlar)

LESS’in fonksiyon desteği onu daha da programlama dili gibi göstermekte. Yapımcılar tarafından tanımlanmış birkaç fonksiyonu artık stil kodlarımız içinde kullanabiliyoruz. Bir örnek hazırlayalım.

@mavi : blue;

a{
	color:@mavi;
	&:hover{
		color:desaturate(@mavi,50%);
	}
}

Böylece mavi renkteki bir link üzerine gelince daha koyu bir hale bürünür oluyor. Bu kodun normal CSS’deki karşılığı ise şu şekilde :

a{
	color:blue;
}

a:hover{
	color:#24466c;
}

Buradaki #24466c hex kodu mavi rengi 50% desaturate ettiğimizde elde ettiğimiz değer.

Kapanış

Bu tip web tasarımını kolaylaştıran araçları tanımaya devam edeceğiz. Yakın tarihte SASS ve Stylus ilgili de konuşuyor olacağız.

Bugün hızlı ve verimli bir şekilde LESS’e giriş yaptık. Eğer daha detaylı bilgi edinmek isterseniz bu makaleyi oluştururken kullandığımız aşağıdaki kaynaklara göz atabilirsiniz.

LESS’in gözüken tek dezavantajı bütün normal CSS dosyalarınızı tekrar derlemek zorunda olmanızdır.

Kaynaklar

http://lesscss.org/features/
http://www.fatihtoprak.com/less-ogreniyoruz-kullanimi-degiskenler-saglayicilar.html
http://12devsofxmas.co.uk/2011/12/less/
ahttps://css-tricks.com/sass-vs-less/

Yazarın Yorumu

LESS ve türevi birçok araç günümüzde popüler olarak kullanılmaktalar. Ancak görünen o ki CSS’in günden güne gelişmesiyle bütün bu özellikleri kapsar hale gelmesi de kaçınılmaz. Dolayısıyla ileri günlerde bu araçlara ihtiyaç duymadan birçok fonksiyoneliteyi de CSS içerisinde kullanabilir olacağız.