Dinamik Stil Dili: LESS

Bildiğiniz gibi web sayfalarının iskeleti HTML kodlarıdır. Web arayüzlerini görselleştirmek adına HTML’e desteği CSS sağlar. Yalnız dinamik işlemler yapılabilecek bir dil değil, bir işaretleme dilidir (markup language) CSS.

İşte bu ihtiyacı gidermek için LESS imdadımıza yetişiyor. CSS’den daha basit yazım şekli ve yazılım dillerinden alışkın olduğumuz;  değişken kullanımı, koşullama mantığı, sınıf yapısı(mixins) ve fonksiyonlarıyla FED‘lere büyük kolaylıklar sunan bir dil LESS.

Kodlarımızı ‘.less’ uzantılı bir dosyaya yazacağız. Örneğin; ‘style.less’.

	<link href="styles.less" rel="stylesheet/less" type="text/css" />

Ayrıca buradan indirebileceğiniz javascript dosyasını kullanacağız.

<script type="text/javascript" src="less.js"></script>

Şimdi biraz yazım tarzından bahsedelim.

Değişkenler

/*LESS*/

@renk: #5B83AD;

#secici {
	color: @renk;
}

.sinif {
	background-color: @renk;
}

p {
	color: @renk + #111;
}

Değişken tanımlarken @ işaretini kullanıyoruz. Örnekte renk adında bir değişken tanımladık ve ona #5B83AD rengini atadık. Son satırda da matematiksel bir işlem yaptık. Aşağıda da CSS çıktısı mevcut.

/*CSS Çıktısı*/

#secici {
	color: #5B83AD;
}

.sinif {
	background-color: #5B83AD;
}

p {
	color: #6c94be;
}

Örneklerin çalışır haline buradan ulaşabilirsiniz.

Sınıflar (Mixins)

Betik dillerden de aşina olduğumuz sınıf yapısı LESS’de de mevcut. Bir CSS seçicisine(id yada class) yazdığımız özellilkleri başka bir CSS seçicisinde de kullanmak istediğimizde küme parantezlerinin içerisine sadece şeçici ismini yazmamız yeterli. Şimdi birkaç örnek verelim:

/*LESS*/

.sinifim {
  font: bold 5em/110% Georgia,serif;
  color: red;
}
.deneme, .deneme2 {
  .sinifim;
}
.deneme2 {
  color: black;
}

 

/*CSS Çıktısı*/

.deneme, .deneme2 {
  font: bold 5em/110% Georgia,serif;
  color: red;
}
.deneme2 {
  color: black;
}

Örneklerin çalışır haline buradan ulaşabilirsiniz.

Parametrik Sınıflar

Kullandığımız sınıflara değer verip ihtiyacımıza göre bu değeri değiştirmek isteyebiliriz. LESS buna da imkan tanıyor. Örnek vermek gerekirse:

/*HTML*/

<button class="buton">buton</button>
<button class="buton buton2">buton2</button>
<button class="buton buton3">buton3</button>

/* LESS */

/*parametrik sınıfımızı tanımlıyoruz*/
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
/*bu sınıfın parametresinde varsayılan değer mevcut*/
.box-shadow(@string: 0 2px 0 #BBB) {
  -webkit-box-shadow: @string;
  -moz-box-shadow: @string;
  box-shadow: @string;
}

.buton {
 display: inline-block;
 margin: 5% 5% 0 0;
 padding: 5%;
 min-width: 20%;
 background-color: #EEE;
 border: 1px solid #DDD;
/*varsayılan değeri olmayan .border-radius sınıfını burada çağırıruz ve ona bir değer atıyoruz.*/
 .border-radius(100%);
 color: #AAA;
 text-align: center;
 text-shadow: 1px 1px 0 white;
 /*burada da varsayılan değeri olan .box-shadow sınıfını çağırıyoruz. dilersek parametresine farklı bir değer de atayabiliriz.*/
.box-shadow;
}
.buton2 {
/*burada parametrenin değerini istediğimiz gibi değiştiriyoruz.*/
  .border-radius(10px);
}
.buton3 {
/*burada da farklı bir değer atıyoruz*/
  .border-radius(20px);
}

/*CSS Çıktısı
.buton {
  display: inline-block;
  margin: 5% 5% 0 0;
  padding: 5%;
  min-width: 20%;
  background-color: #EEE;
  border: 1px solid #DDD;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  color: #AAA;
  text-align: center;
  text-shadow: 1px 1px 0 white;
  -webkit-box-shadow: 0 2px 0 #bbbbbb;
  -moz-box-shadow: 0 2px 0 #bbbbbb;
  box-shadow: 0 2px 0 #bbbbbb;
}
.buton2 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.buton3 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

Örneklerin çalışır haline buradan ulaşabilirsiniz.