aikutto

Hardware, Software and Design

Less Css (lesscss) Nedir? Ne İşe Yarar?

05 Nisan 2013

Bu yazımda lesscss dinamik stylesheet dilinden bahsedeceğim. Lesscss CSS şablonu oluşturmak isteyenlerin işini büyük ölçüde azaltmakta. Adından da anlaşılacağı gibi daha az CSS kodu yazarak istediğimiz şablonu oluşturmamıza yardımcı oluyor.

Peki lesscss nasıl çalışıyor?
Lesscss’de yazdığımız bir kodun bir şekilde CSS’e derlenmesi gerekiyor. Bu, lesscss.org adresinde yayınlanan JavaScript dosyasıyla web browser üzerinde derlenip uygulanacağı gibi Node.js gibi sunucu tarafında da derlenerek CSS oluşturulabilir. İsterseniz SimpLess gibi araçları kullanarak lesscss dosyanızı CSS’e derleyebilirsiniz. Lesscss’in özelliklerinden fazla bahsetmedim ama yazının devamını okuduğunuzda ne kadar güzel özellikleri olduğunu göreceksiniz.
O zaman lesscs’e ait özellikleri açıklamaya başlayabiliriz.

Değişkenler
Lesscss’in ilk bahsedilmesi gereken özelliği tabii ki de değişkenler olmalı. Yani bir rengi, uzunluğu, sayıyı değişken olarak tanımlayıp, bu değişken üzerinde işlem (aritemtik işlemler de dahil) yapabiliyoruz. Örnekte mavi renginden #111 rengini çıkararak #00b kodlu koyu-mavi rengini elde ediyoruz.
@mavi: #00c;
@koyu-mavi: (@mavi - #111);
.yazi {color: @koyu-mavi;}

Mixin’ler(Karıştırmalar)
Bu özellik değişkenlere benziyor. Bu özellik sayesinde birden fazla kuralı tek bir kuralmış gibi kullanabiliyoruz. Örnek verecek olursak; <strong> ve <a> taglarının kutu içerisine alınmasını ve renklerinin kırmızı olmasını istiyoruz. O zaaman örnek kodumuz şu şekilde olacaktır.
.isaretli {
border: 1px solid black;
color: red;
}
a {.isaretli;}
strong {.isaretli;}

İç İçe Kurallar
CSS yazarken paragrafa ayrı, paragrafın içindeki linke ayrı, imleci linkin üzerine getirince ayrı kural eklemek için bütün kuralları alt alta yazmak gerekir ve bu dosyayı büyütürken kodu anlamamızı da güçleştirir. Verdiğimiz örneğin CSS haline bakalım;
p {color: #111;}
p a {color:blue; text-decoration: none;}
p a:hover {color: red;}

Bir de lescss karşılığına bakalım;
p { color: #111;
a {color:blue; text-decoration: none;
&:hover {color: red;}
}
}

Fonksiyonlar
Lesscss’te string, sayı ve renk işlemleri için tanımlanmış fonksiyonlar bulunuyor. Örnek verecek olursak;
@acik-mavi: lighten(@mavi, 10%);
koduyla yukarıda tanımladığımız mavi rengini %10 açarak açık mavi rengini elde ediyoruz. Fonksiyonlara ait tam listeyi bu adresten bulabilirsiniz.

Lesscss’e giriş kısmı bu kadar🙂 Bundan sonrası sizin azminize kalmış🙂


Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: