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:
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 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 🙂
Bir önceki yazımız olan Divleri ekran genişliğine göre alta kaydırma işlemi. başlıklı makalemizde responsive, responsive div düzeni ve responsive dizayn hakkında bilgiler verilmektedir.