Modern web sitelerini programlamak veya tasarlamak isteyen hiç kimse CSS’den kaçamaz. CSS, HTML gibi World Wide Web’in temel dillerinden biridir ve web sayfalarının stilini ve düzenini kontrol etmek için kullanılır.

Bu; düzen, renkler veya tipografi gibi değişkenlerin kaynak kodunu tamamen elden geçirmeye gerek kalmadan, herhangi bir zamanda ayarlanmasını sağlar. Tasarımla ilgili bu bilgiler, CSS’ye dayalı stil sayfalarında saklanır. Ancak, bir web projesi ne kadar büyükse, stil sayfaları o kadar karmaşık ve kafa karıştırıcı hale gelir. Bu yüzden web diliyle çalışmak çok zorlaşır. CSS önişlemcisi LESS burada yazılımcılar için bir rahatlama sağlar.

LESS Nedir?

LESS (Leaner Style Sheets), LESS daha hızlı ve kolay CSS yazabilmenizi sağlayan dinamik bir önişlemci stil sayfası dilidir. Alexis Sellier 2009’da CSS ön işlemcisini piyasaya sürdüğünde, LESS’i CSS’ye dönüştürmek için Ruby de geliştirmiştir. Ancak şimdi, Javascript’e aktarılmış Less.js, stil sayfası dilinin ve derleme sürecinin temelini oluşturur. 

Derlendiğinde, “LESS” CSS kodları oluşturur ve istemci tarafında (yalnızca modern tarayıcılar) veya sunucu tarafında (Node.js ve Rhino ile) çalıştırılabilir. “LESS”, CSS’ye variables (değişkenler), mixins (stil birleştirmeleri), operations (dört işlem) ve işlevler gibi belirli özellikler ve functions (fonksiyonlar) ekler. Bu özellikler, hem minimal hem de esnek olan etkili bir tasarım düzeni geliştirmenize olanak tanır. Ayrıca, “LESS” CSS önişlemci kodları, çeşitli web tarayıcılarıyla uyumludur.

Yazılımcılar çoğu zaman, belirsiz stil sorunlarıyla karşılaştığı için düz CSS satırlarını yazmak yorucu olabilir. Bu nedenle, daha büyük bir proje üzerinde çalışırken CSS kodunuzu mümkün olduğunca az ve temiz tutmaya çalışın. Bunun için “LESS” CSS önişlemcisine ihtiyacınız olacak ve çok zaman kazanacaksınız.

LESS ve CSS Arasındaki Farklar

Hem CSS hem de LESS, stil sayfası dilleri olarak kabul edilir. Bu nedenle, kullanıcı arayüzlerinin ve belgelerin görünümünü belirleyen resmi dillerdir. LESS ve CSS arasındaki temel fark, CSS’nin statik bir dil olması, LESS’in ise dinamik diller arasında yer almasıdır. Bu sayede değişkenler, stil birleştirmeleri ve CSS’de bulunmayan iç içe elemanlar (nesting items) gibi dinamik özellikler sunar.

CSS’deki talimatların sabit bir şema izlemesi gerekirken, LESS, geliştiriciler için önemli ölçüde daha esnek olanaklar sunar. Örneğin, bir stil sayfası boyunca herhangi bir öğe sınıfı için bireysel kurallar tanımlanabilir, bu şekilde aynı kodların sürekli yeniden yazılması gereksiz hale gelir.

LESS Kurulum ve Başlangıç Aşaması

LESS’in anlaşılması, kurulması ve kullanılması kolaydır. 

Web sayfanıza LESS yüklemek için:

  • Less.js JavaScript dosyasını LESS web sitesinden indirin.
  • Dosyayı web sitenizde document root gibi bir yere kaydedin.
  • LESS stil sayfanızı yazın (örneğin, document root’taki style.less adlı bir dosyaya kaydedin).
  • Less.js ve LESS stil sayfası dosyanızı web sayfalarınızın baş bölümüne ekleyin:

LESS stil sayfası bağlantısının, less.js’nin head bölümünüze eklenmesinden önce olduğundan emin olun.

İşte bu kadar! 

Sayfanız yüklendiğinde, less.js betiği otomatik olarak çalışır, LESS stil sayfası kurallarınızı normal CSS kurallarına dönüştürür ve bunlar daha sonra tarayıcı tarafından işlenir.

Artık LESS’i nasıl kuracağınızı bildiğinize göre, en önemli özelliklerine geçebiliriz.

LESS CSS Ön İşlemcisinde Bulunan En Önemli Özellikler

1. Variables (Değişkenler)

JavaScript, Java, Python vb. diğer programlama dillerinde olduğu gibi, “LESS” CSS ön işlemcisinde de değişkenleri tanımlayabilir ve bu değişkenleri istediğiniz yerde kullanabilirsiniz. Değişkenleri bildirmek için ön ek olarak “@” eklemek zorunludur. 

Şimdi, bir değişkeni @brand-color olarak tanımlayalım ve arka plan rengini ayarlamak için onu iki HTML öğesinde kullanalım.

Değişkenleri ortak bir konumda tanımlayabilir ve bunları web uygulaması geliştirme projeniz süresince kullanabilirsiniz. Marka rengi gibi bir değişken bildirmek, onu kolayca hatırlamanıza ve marka rengini gerektiği yerde öğelere uygulamanıza yardımcı olacaktır.

“Less” Code

@brand-color:  #EF592B;

@font-color: #000000; 

div {

   background-color: @brand-color;

}

h3 {

   color: @font-color;

}

Compiled Equivalent CSS Code

div {

  background-color: #EF592B;

}

h3 {

  color: #000000;

}

2. Mixins (Stil Birleştirmeleri)

Stil Birleştirmeleri, ekstra avantajı olan değişkenlere benzer. Mixins ile tam bir sınıf adı tanımlayabilir ve yazı tipi rengi, yazı tipi boyutu, dolgu, kenar boşluğu vb. çeşitli özellikleri ayarlayabilirsiniz. Bu sınıf adlarını aynı kodu tekrar etmeden gerekli tüm sayfalara çağırabilirsiniz.

Başka bir deyişle, Mixins ile bir kural kümesinden başka bir kural kümesine bir dizi özellik ekleyebilirsiniz. Ayrıca bu özellikleri diğer kural kümelerinde de sınıf adını istediğiniz yere ekleyerek kullanabilirsiniz.

“.dimensions” sınıfının özellikleri artık hem “.outer-wrapper” hem de “.inner-wrapper” içinde görünecektir. (“#ids” ifadesini mixin olarak da kullanabileceğinizi unutmayın.)

“Less” Code

#divAbout {

   color: #EF592B;

   background-color: #000000;

}

.dimensions(@height: 50px; @width: 30px) {

   height: @height;

   width: @width;

  #divAbout;

}

.outer-wrapper {

   .dimensions(25px; 65px);

}

.inner-wrapper {

   .dimensions();

}

Compiled Equivalent CSS Code

#divAbout {

  color: #EF592B;

  background-color: #000000;

}

.outer-wrapper {

  height: 25px;

  width: 65px;

  color: #EF592B;

  background-color: #000000;

}

.inner-wrapper {

  height: 50px;

  width: 30px;

  color: #EF592B;

  background-color: #000000;

}

3. Operations (Dört İşlem)

“LESS” CSS ön işlemcisi ile çarpma, bölme, toplama ve çıkarma kullanarak istenen değerlere ulaşmak için kodlar içinde belirli aritmetik işlemleri yapmanıza izin verilir. Bu aritmetik işlemler sadece sayılarla sınırlı değildir, renkler ve değişkenler üzerinde de geçerlidir.

Statik rengi, yüksekliği ve genişliği tanımlayabilir ve ardından “.inner-wrapper” öğesi için yükseklik ve genişlik değerlerini orijinal değerlerinin yarısına atayabilirsiniz. Ardından, bir ekleme işlemi kullanarak farklı bir renk ayarlayabilirsiniz.

“LESS” Code

@prime-color: #00ff00;

@width: 40px;

@height:40px; 

.inner-wrapper {

   width: @width / 2;

   height: @height / 2;

   color: @prime-color + #0000ff;

}

Compiled Equivalent CSS Code

.inner-wrapper {

  width: 20px;

  height: 20px;

  color: #00ffff;

}

4. Fonksiyonlar

“LESS” CSS ön işlemcisi, renkleri değiştirmenize, matematik yapmanıza ve dizeleri değiştirmenize olanak tanıyan bir dizi işlev sunar. Bunları stil sayfanızda kullanmak oldukça basittir. Aşağıda, ana renk ve dolgunun tanımlandığı bir çizim bulunmaktadır. Fonksiyonlar yardımıyla rengi açabilir ve dolgu değerini yükseltebilirsiniz.

“Less” Code

@prime-color: #0000ff;

@padding: 4px;

div {

color: lighten(@prime-color, 10%);

padding-right: round(@padding);

padding-left: round(@padding);

padding-top: ceil(@padding) * 1.25;

padding-bottom: ceil(@padding) * 1.25;

background-color: rgb(239, 89, 43);

}

Compiled Equivalent CSS Code

div {

  color: #3333ff;

  padding-right: 4px;

  padding-left: 4px;

  padding-top: 5px;

  padding-bottom: 5px;

  background-color: #ef592b;

}

Bu yöntemlerden yararlanarak, web projelerinizde kullanabileceğiniz istenen renk çıktısını elde etmek için bir ana rengi diğer renklerle karıştırabilirsiniz. JavaScript’e oldukça benzer olduğundan, stil sayfasında mantıksal işlevselliğin uygulanmasını basitleştirmeye yardımcı olacaktır.