Less Öğreniyoruz ~ Kullanımı, değişkenler, sağlayıcılar, 1

17:08 Hiç yorum yok
Çok fazla alternatifi olmasına rağmen, ve her ne kadar daha geniş kullanım rahatlığı sunan alternatifleri olsa da Web tabanlı projelerinizin geliştirilmesinde önemli ölçüde kullanım rahatlığı ve erişilebilirlik sağlayan Javascript tabanlı bir güzellik olan LESS, bu yazı dizimizin yeni konusu. Bu yazı dizisinden sonra, LESS kullanarak Front End (Ön yüz) geliştirdiğiniz her projenin lezzetine daha başka kıvamda varmış olacaksınız.
Less nedir sorusuna en güzel cevabı ise bir kaç cümlede toplaryacak olursak; LESS, CSS yazımınızı hızlandıran / kolaylaştıran, kendine özgü sistematiği olan, CSS dosyası içerisinde değişkenler barındırabileceğiniz, ön tanımlı fonksiyonları kullanarak hesaplamalar yapabileceğiniz, kendinize özgü fonksiyonlar yaratıp değişkenleriniz ile tümleştirebileceğiniz, hesaplamalarınız için hesap makinesi kullanmak yerine, LESS ile matematiksel 4 işlemi sonuçlandırabileceğiniz harika bir araçtır.
Tabi LESS yerine SASS da kullanabilirsiniz, imla olarak çok benzeseler de yapısal olarak çok fazla ortak yönü olsa da hepsinin birbirinden ayrılan fazlalıkları / birbirine yetemedikleri eksiklikleri söz konusu. LESS tarafına daha fazla hakim olduğumdan öncelikle bir kaç makalede LESS hakkında bilgi paylaşımı yapıp bu esnada geliştirdiğim / geliştireceğim projelerde de SASS kullanarak, SASS hakkındaki birikimlerimi de daha fazla tecrübe ettikten sonra, başka bir yazı dizisinde de aktarmayı hedeflemiyor değilim…

LESS Kullanımı

Aslında çok fazla süslü cümlelerle hayranlıklarını anlatan insanlar olduğumuzdan LESS biraz karmakarışık gibi görünebilir ancak imlasını kavradığımız zaman muazzam kolay ve kullanılır olduğunu farkedeceksiniz.
İşin özünde server tabanına herhangi bir kurulum / eklenti / derleme gerekmeden LESS kullanılacak sayfaya bir javascript dosyası ekleyerek, LESS tabanı ile çalışmalarınızı haekete geçirebilirsiniz. Dikkat etmeniz gereken nokta burada less uzantılı stil dosyanızın less derlemesine yarayan javascript dosyasından önce sayfaya dahil edilmiş olması.
Kaynak Kodu
<link rel="stylesheet/less" href="assets/main.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
Dikkat ederseniz, stil dosyanızın rel etiketine, /less eki gelerek, .less uzantılı stil dosyanızı bu şekilde ssayfanıza dahil edebilirsiniz. Ardından Cloudflare aracılığı ile CDN LESS javascript dosyasınıda sayfanıza ekleyebilirsiniz. Tabi CDN kullanmak istemezseniz, bunu kendi klasörleriniz içinde barındırabilirsiniz.
Ekstra olarak bir javascript dosyası veya plugini kullanmak durumunda değilsiniz. Tamamen bu şekilde LESS javascript ek kütüphanesini sayfanıza dahil etmeniz kafi olacaktır.
LESS ile oluşturduğunuz stil dosyanızı daha sonra yardımcı araçlar veya online araçlar sayesinde compile (css e çevirmek) ederek less js dosyasını sistemden kaldırıp, normal .css uzantılı dosyanızı sisteme dahil ederek kullanabilirsiniz.İşte üstte de ifade ettiğim gibi, LESS yordamı ile kolaylıkla CSS yazıp projelerinizi geliştirme aşamasında hız kazanabilirsiniz.Ve dahasında LESS ile CSS yazmaya başlayabilirsiniz.
Her ne kadar ” Craig David – Less is more “ dese de, belki daha fazla satır kod yazmış olursunuz ama, kendi şarkısında da ifade ettiği gibi, LESS aslında fazlası manasını taşır ;) Buyrun örnek değişken mantığı ve kullanımını görelim… Parça için ise, youtube sayfasından şu linke göz atabilirsiniz.

LESS Değişkenleri

Değişkenler, diğer dillerde olduğu gibi başında değişken olduğunu niteleyen bir harfle kullanılıp alacağı değeri : işareti ile ayırarak yazılıyor LESS içinde.
Kaynak Kodu
// Bileşenler
@link-renk:        #428bca; // açık deniz mavi rengi
@link-renk-hover:  darken(@link-color, 10%);
 
// Kullanımı
a,
.link {
  color: @link-renk;
}
a:hover {
  color: @link-renk-hover;
}
.widget {
  color: #fff;
  background: @link-renk;
}
Üstteki örnek değişkenlerde, link ve link-hover şeklinde iki farklı değer kullandık. Tüm stil kalıbımız içerisinde, kullanmak istediğimiz her yerde eğer belirlediğimiz rengi o alanda kullanmak istiyorsak, vermiş olduğumuz link-renk değişkenini @ işareti ile birlikte kullanacağız.
Değişken eklemeleri / fazla değerler ile değişken kullanımları
Bir değişken için çoklu değerler de sağlamanız olası. Çoklu değerler vermek için ise, şu şekilde bir örnek kullanım olanağınız var.
Kaynak Kodu
// Değişken
@secici_degiskeni: solbar;
 
// Usage
.@{secici_degiskeni} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
Url yerine de bir değişken atayarak kullanım örneği de resmi siteden alınan şu örnekle ifade edilebilir;
Kaynak Kodu
// Değişken
@klasoryolu: "../img";
 
// Kullanım
body {
  color: #444;
  background: url("@{klasoryolu}/menu.png");
}
Import içinde değişken kullanımı ise şu şekilde;
Kaynak Kodu
// Değişken
@themes: "../../src/themes";
 
// Kullanım
@import "@{themes}/stil.less";
Aynı zamanda işi biraz daha fantezileştirmek isteyenleriniz de olabilir bunun için seçici ayarları kısmında da değişken kullanabilirsiniz.
Kaynak Kodu
@deger1: color;
@deger2: width;
@genislik: 300px;
 
.bilesen {
  @{deger1}: #0ee;
  background-@{deger1}: #999;
  #{deger2}: @{genislik}
}

Sağlayıcılar (Extend)

Aslında uygun kelimeyi seçemedim Türkçe karşılık olarak. En sağlıklısının extend karşılığı olarak sağlayıcı olduğuna kanaat verdim diyebilirim. Aslında diğer manası ile uzatmak anlamı da yakışır bu duruma. Örneklerden yola çıkarak kullanımı keşfettiğinizde zaten sizde aynı kanıya varacaksınız eminim.
Farklı seçiciler (sınıflar) içinde kullanılabilecek aynı zamanda da aynı sınıfa ait olacak seçiciler için extend kullanımı yapabilirsiniz.
Kaynak Kodu
.menu ul {
  &:extend(.icsecici);
  background: blue;
}
Bu örnekteki kullanımın çıktısında, menu sınıfı içinde aynı zamanda herhangi bir yerde kullanılan, .icsecici sınıfının özelliklerini de .menu sınıfı içinde kullanmış eşitlemiş olacaksınız. Çıktı alttaki gibi olacaktır.
Kaynak Kodu
.menu ul {
  background: blue;
}
.icsecici,
.menu ul {
  color: red;
}
Aslında, çoklu seçicileri, tek tek yazmak yerine, virgül ile aynı özellikteki seçicileri bu şekilde birleştirebiliyorduk, işte bu durumu extend özelliği bizler için gerçekleştirmiş oluyor. Aynı stil kalıbındaki eşleşen diğer değerleri de extend ile kombine edip toplamış oluyoruz kısaca.
LESS ‘in özelliklerini kullanarak yazdığınız iç içe seçiciler içinde kullanımı gayet kolay…
Kaynak Kodu
.sinif {
  tr { // iç içe yazılmış hedef seçici
    color: blue;
  }
}
.sinif2:extend(.sinif tr) {} // eşleşen değer toplamı
Tamamını etkilemek ve tamamı olarak aynı sınıfları kombine etmek isterseniz, extend all parametresini kullanmalısınız.
Kaynak Kodu
.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}
 
.toplanmislar:extend(.test all) {}
Aynı zamanda, extend’i Pseudo Class’lar içinde kullanabilirsiniz. (nth-child,hover,active,focus,placeholder gibi..)
Sağlayıcı olan extend’lerin mixinler ve fonksiyonlar ile de mükemmel bir ilişkisi var. Dizi yazısının diğer parçalarında, sistematiği ifade eden yazılardan sonra açıkçası bu konuya binayen örnekleri, de çoğaltacağız elbet. Ancak konuya hakim olanlar için less resmi sitesinden çokça örnek irdeleyebilirsiniz.
Resmi site adresi için buradan devam edebilirsiniz. Sonraki LESS Öğreniyorum serisinde görüşmek üzere.



Bu yayının komplesi http://www.fatihtoprak.com adresinden alınmıştır.

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )

Labels

Subscribe