Less Genel Bilgi

mcv_js · 1 Ara 2018

Less,Css işlemlerini kolaylaştırır.Less üzerinden matematiksel işlemler yapılabilir,mixin vs gibi değerler kullanılabilir,değişken tanımlanabilir.

Kurulum--

Kurulumu cdn üzerinden anlatacağım.</head> etiketi üstüne;

HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

yapıştrmanız yeterli.

Kullanım--

Aynı şekilde bir less dosyamızı dahil edelim..

HTML:

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

Örnekler--

Değişken oluşturmak için değişken başına @ koyuyoruz.

Less:

@bg: #FFF;
#header{
background:@bg;
}

İç içe yazım

Less'de kolaylaştıran yöntem budur.Css de ayrı ayrı tanımlamak yerine less'de alt alta yazılabilir.

Less:

//Normalde
.category{
  background:#000
}
.category ul li{
  float:left;
  margin-right:10px;
}
.category ul li a{
  color:#000;
}
.category ul li a:hover{
  color:red;
}
//Less ile
.category{
  background:#000;
  ul li{
    float:left;
    margin-right:10px;
    a{
      color:#000;
      &:hover{color:red;}
    }
  }
}

Fonksiyonların Kullanımı..

Örnek olarak bir rengi karartmak,aydınlatmak gibi fonksiyonları less ile yapabileceğiz.

Less:

.input{
background: darken(@inputBg, 20%);
}

Bu kodumuzda da input class'ının background değerini inputBg değişkeninin değerinin %20 karartılmış olarak belirledik...

Devamı için:
Getting started | Less.js

Mixin Kullanımı
---

İlk önce bu parametrenin amacından bahsedeyim..

Bildiğiniz gibi bazen bazı kodlar da kullanılan şeyler bazı yerlerde de aynı olduğu için yazarken zorlanıyoruz.
Artık bunun ile bir kod içeriğimizi başka içerikde çağırabiliyoruz.

Hadi bunu daha yakında görelim.

Less:

.radius{
border-radius:50%;
}
.block-header{
.radius;
color:white;
}
//Çıktı
.block-header{
border-radius:50%;
color:white;
}

Ugur · 1 Ara 2018

Xenforo'ya ilk geçtiğimde bu kodlar epey kafamı karıştırmıştı.

CSS:

//Less ile
.category{
  background:#000;
  ul li{
    float:left;
    margin-right:10px;
    a{
      color:#000;
      &:hover{color:red;}
    }
  }
}

mcv_js · 1 Ara 2018

Ugur' Alıntı:
Xenforo'ya ilk geçtiğimde bu kodlar epey kafamı karıştırmıştı.

CSS:

//Less ile .category{ background:#000; ul li{ float:left; margin-right:10px; a{ color:#000; &:hover{color:red;} } } }

Aynen öyle abi ama alıştıktan sonra daha da kolay ve pratik geliyor insana.Bir nevi css mvc

eTiKeT™ · 1 Ara 2018

Sade ve net bir bilgi,teşekküler

.
Bu olayda karmaşa oluşturan en büyük sorun süslü parentezi kapatmak. Eğer çok satırlı bir çalışma ise süslü parentezin birini atlarsanız bittiniz

onu bulmak gerçek bir işkence olabilir. Tavsiyem } sonra eklerim gibi düşünmeden { açtıktan sonra hemen kanptın }

.

mcv_js · 1 Ara 2018

eTiKeT™' Alıntı:
Sade ve net bir bilgi,teşekküler .
Bu olayda karmaşa oluşturan en büyük sorun süslü parentezi kapatmak. Eğer çok satırlı bir çalışma ise süslü parentezin birini atlarsanız bittiniz onu bulmak gerçek bir işkence olabilir. Tavsiyem } sonra eklerim gibi düşünmeden { açtıktan sonra hemen kanptın } .

Belki de // ile oraya bir belirteç eklenebilir unutlmasın diye.Gerçi bazı ide lerde parantezlere tıklayınca bitişi ve ya başlangıcı gösteriyor

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Less Genel Bilgi

mcv_js

xFanatik

Ugur

Destek Ekibi

mcv_js

xFanatik

eTiKeT™

value="{XGT}"

mcv_js

xFanatik

Foruma hoş geldin 👋, Ziyaretçi

Gizliliğinize değer veriyoruz