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

Merhaba arkadaşlar,
2011’den bu yana 2010 da diyebiliriz, arabirim konusunda kendimi pek geliştirmiyordum sadece kazanmış olduğum bilgimi tecrübe ile sabitliyordum(Şuan günümüzdeki psd to css işlerinde bile hala geçerli bilgiler). Ama gün geçtikçe css yazmaktan nefret eder oldum, çok boğucu ve sıkıcı geliyordu( bu konuda yazılarımda vardır ) sonra Onur dediki “eğer bir işten sıkılıyorsan kendini geliştirmiyorsundur” Bende bu cümleyi yorumlamayacak kadar css’den soğuduğum için pek önemsemedim. Gel gelelim bu konu üstünden baya zaman geçtikten sonra bir takım arabirim gruplarında insanların ne kadar kibirli, bilmediği konularda artistik hareketler yapması beni baya şevke getirdi (o arkadaşlardan Allah razı olsun 🙂 ) ve hemen LESS CSS‘e girdim. Less css’i kullanabilmek 10 dk’mı almadı ama tabiki 10 dk’da öğrenilecek konu değildir benim şuanki bilgim genel şeyler ve LESS’in at ile deve olmadığını size anlatabilecek kadar.

LESS Css nedir ?

LESS dinamik bir stil dosyasıdır, kısaca açıklayacak olursak padding: 10px; diye tanımlayacağımız kuralı padding: @degisken; diye tanımlıyoruz  veya padding :5px demek istiyorsak padding: @degisken/2; diye tanımlama yapabiliyoruz. Fonksiyonlar tanımlayabiliyoruz (bu konuya değineceğim). Detaylı bir bilgi için buraya tıklayınız.

LESS’in Faydaları ?

LESS büyük projelerde çok fazla kullanım kolaylığı sağlayacaktır. Bu kullanım kolaylıkları

1 – Hızlı bir css yazımı,

2 – Daha az kural yazımı,

3 – Daha hafif css dosyaları olacaktır (ama less.js version 1.3.0’nin +49KB olduğunu unutmayalım)

 

LESS’in sevmediğim yönleri

1 – Editörlerde renk tanımlaması gerçekten çok kötü, bunu editör ayarlarından düzeltebiliriz ama bunu biz değil lesscss  yapmış olmalıydı.

2 – 49kb’lık js her zaman canımı sıkar

 

LESS yazarken dikkat etmemiz gereken noktalar neledir ?

1 – Noktalama hatalarında komple stil.less dosyasını uçuruyor ve stil dosyası yokmuş gibi okuyor.

2 – Var olmayan veya yanlış yazılmış değişken isimleri olduğunda stil dosyasını yokmuş gibi okuyor.

3 – Sayısal işlemlerde “-” değerini kullanmadan önce mutlaka boşluk bırakılmalı çünki – değerini tire gibi okuyor.

LESS’e başlangıç

İlk önce yapacağımız şey bir proje klasoru oluşturmak (her yiğidin bir yoğurt yiyişi vardır o yüzden “ben nasıl bir projeye başlıyorum” bunu yakında detaylı bir şekilde anlatacağım.)

Buradan less.js dosyasını(güncel sürümü indirin faydalıdır) indirip  index.html dosyamıza aşağıdaki gibi ekliyoruz.

hemen bir tane stil.less uzantılı bir dosya oluşturuyoruz ve aşağıdaki gibi index.html dosyamıza ekliyoruz. Buraya kadar yaptık çalışıyormu diye test edelim. stil.less dosyasınızı herhangi bir editör ile açalım ve arkaplan rengi verelim.

İndex.html dosyamızı tarayıcıdan açtıkdan body aşağıdaki gibi oluyorsa. İşlem bitmiştir arkadaşlar. İşin aslı LESS’de bitmiştir bundan sonraki işlemlerin hepsi size(ruhunuza) kalmış. Ama ben genede bir kaç örnek daha vererek hiyerarşik yapıyada değineceğim.

Şimdi bir başlık, konu içeriği ve konu içeriğinde bir kaç resim tarzı bir şablon yapalım

div#ust div’i için html ve less kodlarını yazalım

yukarıda gördüğünüz gibi html kodlarımızda hiç bir değişiklik yok, şimdi lise less kodlarını yazalım.

Yukarıdaki less kodlarını tek tek açıklayacak olursak;
Css kısmındaki en üstünde degiskenler kismini kafamıza göre düzenliyoruz.

Less ile değişken tanımlama

Yukarıdaki kodda tanımlama methodlarından birisidir. Css kodlarını yazarken “width” değerini yazıp yanına bizim belirlediğimiz değişkeni(css dosyasının üstünde değişkenleri tanımlamıştık) yazıyoruz.

Daha fazla bilgi : http://lesscss.org/#-variables

Less ile statik fonksiyon tanımlama

Yukarıdaki tanımlama ise sabit bir fonskiyon tanımlıyoruz(aşağıdaki gibi).

Daha fazla bilgi : http://lesscss.org/#-variables

Şuanda 2 tür tanımlamayı anlar

div#orta tanımlamarı :

Dinamik fonksiyon tanımlama

Arkadaşlar hemen hemen en çok sevdiğim noktalardan birisi dinamik fonskiyon tanımlama,

Fonskiyonların içeriği

Fonksiyon tanımlamaları gördüğünüz gibidir, aşağıda ise çoklu değerli fonksiyondan bahsedeceğim.

Yukarıda gördüğün gibide birden fazla değişken ile alışveriş yapabiliyoruz.

Sayısal değerleri

Yukarıdaki gibi sayısal değerlerde matematik işlemleri yapabiliyoruz ama burada dikkatli olmamız gereken bir olay var

eğer bir değişkene “-” li matematik işlemi uygulayacaksak

Yukarıdaki gibi -‘nin önünde bir boşluk olmak zorunda.

Hiyerarşik Yapı

Benim en çok sevdiğim kısımlardan birisi Hiyerarşik yapı.

Yukarıda gördüğünüz gibi iç içe yazım gerçekten insana kod yazarken haz veriyor.

Arkadaşlar şimdilik diyeceklerim bu kadar, uzun makaleler yazmayı hiç sevmiyorum ama uzun bir konu. Makaleyi 1 hafta gibi zamanda anlattığım için cümleler arası kopuklu, yanlışlık olabilir şimdiden özür:)

Kalın sağlıcakla….