Neden Less Kullanıyorum?

Neden Less kullanıyorum sorusunun cevabı, sanırım herkes için aynıdır.

Projeye Less ile başlamak, çalıştığım projeyi hazırlama ve düzenleme de ciddi zaman tasarrufu sağlar.

Bu açıklama sanırım birçok şeyi açıklıyor. Projenizin üretim süresi ne kadar kısa olursa fiyatınız ona göre olur. Müşterilerinizden gelen geri bildirimleri ne kadar hızlı düzenlerseniz. O kadar rahat çalışır, ve projeye olan motivasyonunuz düşmez.

Aslında Neden Less sorusu yerine, Neden Sass? veya
Neden Stylus? sorusuda sorulabilirdi. Hepsi aynı kapıya çıkıyor, çünkü hepsi aynı işi yapar.

Css Preprocessor

Css’yi önceden işlemek anlamına gelir.
Css Preprocessor terimi Less, Sass veya Stylus gibi önişleyicilerin genel adıdır. Buradaki linkte en popüler olanları listelenmiştir. İçlerinden birini seçip kullanmaya başlamalısınız. (Benim tercihim Less’den yana oldu.)

Css3 kullanıma açıldığında çok güzel özelliklerle geldi.

• Gradients
• Box Shadow
• Box Sizing

Bunlardan sadece birkaçı, fakat bu yenilikler tarayıcılar tarafından farklı farklı yorumlandı her üretici kendi parametresini belirledi. (İnternet Explorer listeye bile dahil etmiyorum.) Box Shadow özelliğini ele alalım.

.content{
   -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

Çalışmanız için content sınıfına ait bir nesneye gölge vermek istediğinizde lider tarayıcı markaları için ayrı ayrı kod yazmak zorunda bırakıldık. İşte bu sebeple Css dosyamızı önden işleyecek bir arabirime ihtiyaç duyduk. Tüm bu kodları tekrar tekrar yazmamak için Css’yi önden işleyerek çıktı veren araçlar doğdu.

Şimdiye kadar Less ve benzeri işleyicilerin hangi ihtiyaçtan doğduğunu ve ne sebeple kullanılması gerektiğini açıklamaya çalıştım.

Şimdi gelelim tarayıcaların istediği bu kod kalabalığından kurtulmak için Less ile kullanabileceğiniz birbirinden değerli 10 Mixin‘e

Less Mixin Kullanımı

Less içinde mixin kullanımı çok basit bir standarta tabiidir. Mixin kalıbını doğru anlarsanız çok hızlı sonuçlar elde edersiniz.

2 çeşit Mixin kullanımı vardır.

1.Standart Mixin

.mixin() {
  background: white;
}
.content {
  .mixin;
}

// Yukarıdaki kodun derlenmiş hali
.content{
  background: white;
}

2.Parametric Mixin (Değer alabilen)

.margin(@dikey) {
  margin: @dikey auto;
}
.content {
  .margin(10px);
}

// Yukarıdaki kodun derlenmiş hali
.content{
  margin: 10px auto;
}

 

Less en çok kullanılan Mixin kalıpları

1.Border Radius

/* Mixin */
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

/* Kullanımı */
#content{
  .border-radius(20px);
}

/* Css Çıktısı */
#content{
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

2.Border Radius Özel

/* Mixin */
.border-radius-ozel(@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
	-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
	border-radius: @topleft @topright @bottomright @bottomleft;
}

/* Kullanımı */
#content {
  .border-radius-ozel(20px, 20px, 0px, 0px);
}

/* Css Çıktısı */
#content {
  -webkit-border-radius: 20px 20px 0px 0px;
  -moz-border-radius: 20px 20px 0px 0px;
  border-radius: 20px 20px 0px 0px;
}

 

3.Box Shadow

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
	-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

/* Kullanımı */
#content {
	.box-shadow(5px, 5px, 6px, 0.3);
} 


/* Css Çıktısı */
#content {
  -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

4.Transition

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition: @prop @time @ease;
	-moz-transition: @prop @time @ease;
	-o-transition: @prop @time @ease;
	-ms-transition: @prop @time @ease;
	transition: @prop @time @ease;
}

/* Kullanımı */
#content {
	.transition(all, 0.5s, ease-in);
}

/* Css Çıktısı */
#content {
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

5.Transform

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
	-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

/* Kullanımı */
#content {
	.transform(5deg, 0.5, 1deg, 0px);
} 

/* Css Çıktısı */
#content {
  -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -moz-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -o-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -ms-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}

Gradient

6.Linear Gradient

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(@origin, @start, @stop);
	background-image: -moz-linear-gradient(@origin, @start, @stop);
	background-image: -o-linear-gradient(@origin, @start, @stop);
	background-image: -ms-linear-gradient(@origin, @start, @stop);
	background-image: linear-gradient(@origin, @start, @stop);
}

/* Kullanımı */
#content {
	.gradient(left, #663333, #333333);
}

/* CSS Çıktısı */
#content {
  background-color: #663333;
  background-image: -webkit-linear-gradient(left, #663333, #333333);
  background-image: -moz-linear-gradient(left, #663333, #333333);
  background-image: -o-linear-gradient(left, #663333, #333333);
  background-image: -ms-linear-gradient(left, #663333, #333333);
  background-image: linear-gradient(left, #663333, #333333);
}

7.Quick Gradient

/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) {
	background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}

/* Kullanımı */
#content {
	background-color: BADA55;
	.quick-gradient(top, 0.2);
}

/* Css Çıktısı */
#content {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

8.Webkit Reflection

/* Mixin */
.reflect (@length: 50%, @opacity: 0.2){
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

/* Kullanımı */
#content {
	.reflect(20%, 0.2);
}

/* Css Çıktısı */

#content {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.2)));
}

Renk Hesaplamaları

9.Çok Renkli Şema

/* Mixin */
@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);

/* Kullanımı */
.one   {color: @base;}
.two   {color: @complement1;}
.three {color: @complement2;}
.four  {color: @lighten1;}
.five  {color: @lighten2;}

/* Css Çıktısı */
.one   {color: #663333;}
.two   {color: #336666;}
.three {color: #2b5555;}
.four  {color: #994d4d;}
.five  {color: #bb7777;}

10.Monochrome Renk Şeması

/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

/* Kullanımı */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

/* Css Çıktısı */
.one   {color: #663333;}
.two   {color: #884a44;}
.three {color: #aa6355;}
.four  {color: #442225;}
.five  {color: #442225;}