LESS - Hızlı Kılavuz

LESS, web sitesi için özelleştirilebilir, yönetilebilir ve yeniden kullanılabilir stil sayfası sağlayan bir CSS ön işlemcisidir. LESS, CSS'nin yeteneğini artıran dinamik bir stil sayfası dilidir. LESS ayrıca çapraz tarayıcı dostudur.

CSS Ön İşlemcisi, CSS'yi genişleten ve web tarayıcınız tarafından okunabilmesi için normal CSS sözdiziminde derlenen bir komut dosyası dilidir. Dinamik CSS oluşturmanıza olanak tanıyan değişkenler , işlevler , karışımlar ve işlemler gibi işlevler sağlar.

Neden DAHA AZ?

Şimdi neden LESS kullandığımızı anlayalım.

• LESS, daha temiz, çapraz tarayıcı dostu CSS oluşturmayı daha hızlı ve daha kolay bir şekilde destekler.

• LESS, JavaScript'te tasarlanmıştır ve ayrıca diğer CSS ön işlemcilerinden daha hızlı derlenen canlı kullanım için yaratılmıştır .

• LESS, kodunuzu modüler bir şekilde tutar, bu da onu okunabilir ve kolayca değiştirilebilir hale getirerek gerçekten önemlidir.

• DAHA AZ değişkenlerin kullanılmasıyla daha hızlı bakım sağlanabilir .

Tarih

LESS tarafından tasarlandı Alexis SellierLESS açık kaynak kodludur. LESS'in ilk sürümü Ruby'de yazılmıştır; sonraki sürümlerde Ruby kullanımı JavaScript ile değiştirildi.

Özellikleri

• Daha temiz ve daha okunaklı kod, düzenli bir şekilde yazılabilir.

• Stilleri tanımlayabiliriz ve kod boyunca yeniden kullanılabilir.

• LESS, JavaScript'e dayanır ve süper bir CSS setidir.

• LESS, kod fazlalığı sorununu çözen çevik bir araçtır.

Avantajlar

• LESS, tarayıcılarda çalışan CSS'yi kolayca oluşturur.

• LESS, yuvalama kullanarak daha iyi ve iyi organize edilmiş kod yazmanıza olanak tanır .

• Değişkenlerin kullanılmasıyla bakım daha hızlı yapılabilir .

• LESS, kural kümelerinizde referans vererek tüm sınıfları kolayca yeniden kullanmanızı sağlar.

• LESS, kodlamayı daha hızlı hale getiren ve zaman kazandıran işlemlerin kullanılmasını sağlar .

Dezavantajları

• CSS ön işlemede yeniyseniz öğrenmek zaman alır.

• Modüller arasındaki sıkı bağlantı nedeniyle, bağımlı modülleri yeniden kullanmak ve / veya test etmek için daha fazla çaba gösterilmelidir.

• LESS, Compass , Gravity ve Susy çerçevelerinden oluşan SASS gibi eski önişlemciye kıyasla daha az çerçeveye sahiptir .

Bu bölümde, LESS'in nasıl kurulacağını adım adım anlayacağız.

LESS için Sistem Gereksinimleri

• Operating System - Çapraz platform

• Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

LESS kurulumu

Şimdi LESS'in kurulumunu anlayalım.

Step 1 - ihtiyacımız var NodeJsDAHA AZ örnek çalıştırmak için. NodeJ'leri indirmek için bağlantıyı açınhttps://nodejs.org/en/, aşağıda gösterildiği gibi bir ekran göreceksiniz -

Dowload son Özellikleri zip dosyasının sürümünü.

Step 2- Node.js'yi sisteminize yüklemek için kurulumu çalıştırın .

Step 3- Ardından, NPM (Düğüm Paketi Yöneticisi) aracılığıyla sunucuya LESS'i yükleyin. Komut isteminde aşağıdaki komutu çalıştırın.

npm install -g less

Step 4 - LESS'in başarılı bir şekilde kurulmasından sonra, komut isteminde aşağıdaki satırları göreceksiniz -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Misal

Aşağıdaki basit bir LESS örneğidir.

merhaba.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Şimdi CSS'ye oldukça benzeyen bir dosya style.less oluşturalım, tek fark onun .less uzantısı ile kaydedilecek olmasıdır . Hem .html hem de .less dosyaları klasörün içinde oluşturulmalıdırnodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyin -

lessc style.less style.css

Yukarıdaki komutu çalıştırdığınızda, style.css dosyasını otomatik olarak oluşturacaktır . LESS dosyasını her değiştirdiğinizde, yukarıdaki komutucmdve sonra style.css dosyası güncellenecektir.

Style.css Yukarıdaki komutu çalıştırdığınızda dosyası aşağıdaki kodu olacak -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şimdi aşağıdaki adımları gerçekleştirelim -

• Yukarıdaki html kodunu şuraya kaydedin: hello.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

Bir sınıfın özelliklerinin başka bir sınıfta kullanılmasına izin veren ve özellikleri olarak sınıf adını içeren bir CSS özellikleri grubudur. LESS'te, sınıf veya kimlik seçiciyi kullanarak mixin'i CSS stiliyle aynı şekilde bildirebilirsiniz. Birden fazla değeri saklayabilir ve gerektiğinde kodda yeniden kullanılabilir.

Misal

Aşağıdaki örnek, LESS dosyasında iç içe geçmiş kuralların kullanımını gösterir -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: nested_rules.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

Medya ve ana kare gibi yönergeleri aynı şekilde, seçicileri iç içe yerleştirdiğiniz şekilde iç içe yerleştirebilirsiniz. Yönergeyi en üste yerleştirebilirsiniz ve ilgili öğeleri kural kümesinin içinde değiştirilmeyecektir. Bu, köpürme süreci olarak bilinir.

Misal

Aşağıdaki örnek, LESS dosyasında iç içe geçmiş yönergelerin ve köpürmenin kullanımını gösterir -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Ardından, style.less dosyasını oluşturun .

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: nested_directives_bubbling.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

LESS, artı (+), eksi (-), çarpma (*) ve bölme (/) gibi bazı aritmetik işlemler için destek sağlar ve herhangi bir sayı, renk veya değişken üzerinde işlem yapabilirler. Değişkenleri kullanırken işlemler çok zaman kazandırır ve basit matematik üzerinde çalışmak gibi hissedersiniz.

Misal

Aşağıdaki örnek, LESS dosyasındaki işlemlerin kullanımını gösterir -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Ardından, style.less dosyasını oluşturun .

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: operations.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

Seçicileri dinamik olarak oluşturur ve özelliği veya değişken değerini keyfi dizge olarak kullanır.

Misal

Aşağıdaki örnek, LESS dosyasında kaçış kullanımını gösterir -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

p {
   color: ~"green";
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu çalıştırın, aşağıdaki kodla style.css dosyasını otomatik olarak oluşturacaktır -

style.css

p {
   color: green;
}

Her şey yazılı içeride ~ "yazi" olarak gösterilecektir yazi CSS koduna AZ kod derleme sonra.

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şimdi aşağıdaki adımları gerçekleştirelim -

• Yukarıdaki html kodunu şuraya kaydedin: escaping.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

LESS, JavaScript kodunu değerleri değiştirerek eşler ve stil sayfasındaki HTML öğelerinin özelliklerini değiştirmek için önceden tanımlanmış işlevleri kullanır. Yuvarlak işlev, zemin işlevi, tavan işlevi, yüzde işlevi gibi renkleri değiştirmek için çeşitli işlevler sağlar.

Misal

Aşağıdaki örnek, LESS dosyasındaki işlevlerin kullanımını gösterir -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Şimdi yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: functions.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, görüntülendiğinde aşağıdaki çıktıyı alacaksınız.

Açıklama

Ad alanları, karışımları ortak bir ad altında gruplamak için kullanılır. Ad alanlarını kullanarak ad çatışmasını önleyebilir ve bir karışım grubunu dışarıdan kapsülleyebilirsiniz.

Misal

Aşağıdaki örnek, LESS dosyasında ad alanlarının ve erişimcilerin kullanımını gösterir -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: namespaces_accessors.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

Değişken kapsamı, mevcut değişkenin yerini belirtir. Değişkenler yerel kapsamdan aranacak ve eğer mevcut değillerse, derleyici üst kapsamdan arayacaktır.

Misal

Aşağıdaki örnek, LESS dosyasında ad alanlarının ve erişimcilerin kullanımını gösterir -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: scope.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

Yorumlar, kodu kullanıcılar için net ve anlaşılır kılar. Kodda hem blok stilini hem de satır içi açıklamaları kullanabilirsiniz, ancak DAHA AZ kodunu derlediğinizde, tek satırlı yorumlar CSS dosyasında görünmez.

Misal

Aşağıdaki örnek, LESS dosyasındaki yorumların kullanımını göstermektedir -

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Şimdi yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: comments.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

LESS veya CSS dosyalarının içeriğini içe aktarmak için kullanılır.

Misal

Aşağıdaki örnek, LESS dosyasında içe aktarmanın kullanımını göstermektedir -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Şimdi myfile.less dosyasını oluşturun.

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Şimdi style.less dosyasını oluşturun.

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

Myfile.less aktarılacak dosya style.less yolundanhttps://www.tutorialspoint.com/less/myfile.less

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: importing.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Bu bölümde, LESS'teki Değişkenleri tartışacağız. LESS, değişkenlerin bir @ sembolü ile tanımlanmasına izin verir . Değişken atama yapılırcolon(:).

Aşağıdaki tablo, LESS değişkenlerinin kullanımını ayrıntılı olarak göstermektedir.

Extend, diğer seçici stillerini bir seçicide kullanarak genişleten LESS sözde bir sınıftır. :extend seçici.

Misal

Aşağıdaki örnek kullanımını gösterir uzatmak AZ dosyasında -

ext_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Sen derlemek olabilir extend.less dosyayı extend.css şu komutu kullanarak -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: extend_syntax.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Sözdizimini Genişlet

Extend, kural kümesine yerleştirilir veya bir seçiciye eklenir. Virgülle ayrılmış bir veya daha fazla sınıf içeren sözde bir sınıfa benzer. İsteğe bağlı anahtar kelimeyi kullanmaallher seçici takip edilebilir.

Misal

Aşağıdaki örnek , LESS dosyasında genişleme sözdiziminin kullanımını gösterir -

ext_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: extend_syntax.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Aşağıdaki tablo, LESS'te kullanabileceğiniz tüm genişletilmiş sözdizimi türlerini listeler -

Genişletme için Kullanım Durumları türleri aşağıdadır

Mixinler, programlama dillerindeki işlevlere benzer. Karışımlar, bir sınıfın özelliklerini başka bir sınıf için kullanmanıza izin veren ve özellikleri olarak sınıf adını içeren bir CSS özellikleri grubudur. LESS'te, sınıf veya kimlik seçiciyi kullanarak bir mixini CSS stiliyle aynı şekilde ilan edebilirsiniz. Birden fazla değeri saklayabilir ve gerektiğinde kodda yeniden kullanılabilir.

Aşağıdaki tablo, LESS karışımlarının kullanımını ayrıntılı olarak göstermektedir.

Misal

Aşağıdaki örnek , LESS dosyasında mixin kullanımını göstermektedir -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

Sen derlemek olabilir style.less için style.css aşağıdaki komutu kullanarak -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: less_mixins.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Mixin çağrılırken parantezler isteğe bağlıdır. Yukarıdaki örnekte, her iki ifade.p1(); ve .p1; aynı şeyi yap.

Açıklama

Parametrik karışımlar, başka bir bloğa karıştırıldığında mixin çıktısını özelleştirmek için bağımsız değişkenleri ve özelliklerini alarak LESS'in işlevselliğini artıran bir veya daha fazla parametre kullanır.

Örneğin, basit bir LESS kod parçacığı düşünün -

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

Burada parametrik karışımı .border olarak üç parametreli - genişlik, stil ve renk - kullanıyoruz. Bu parametreleri kullanarak mixin çıktısını geçirilen parametreler değeriyle özelleştirebilirsiniz.

Aşağıdaki tablo, açıklama ile birlikte farklı tipte parametrik karışımları açıklamaktadır.

Bu bölümde, önemini anlayacağız Mixins as Functions. İşlevler gibi, karışımlar da yuvalanabilir, parametreleri kabul edebilir ve değerleri de döndürebilir.

Aşağıdaki tablo, karışımların işlev olarak kullanımını ayrıntılı olarak göstermektedir.

Açıklama

Ayrılmış kural kümesi, özellikler, iç içe geçmiş kural kümeleri, değişken bildirimi, karışımlar vb. Gibi kural kümelerini içerir. Bir değişkende saklanır ve başka bir yapıya dahil edilir; kural kümesinin tüm özellikleri bu yapıya kopyalanır.

Misal

Aşağıdaki örnek, LESS dosyasında karıştırmak için bir kural kümesinin nasıl geçirileceğini gösterir -

pass_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: passing_ruleset.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Kapsam belirleme

Ayrılmış kural kümesindeki tüm değişkenler ve karışımlar, kural kümesinin çağrıldığı veya tanımlandığı her yerde kullanılabilir. Aksi takdirde, hem arayan hem de tanım kapsamları varsayılan olarak kullanılabilir. Bildirim kapsamı, her iki kapsam aynı mixin veya değişken içerdiğinde önceliği alır. Ayrılmış kural kümesi gövdesi, bildirim kapsamında tanımlanır. Ayrılan kural kümesi bir değişkenden diğerine kopyalandıktan sonra kapsamını değiştirmez.

Aşağıdaki tablo tüm kapsam türlerini listeler -

Açıklama

@importdirektifi, dosyaları koda aktarmak için kullanılır. LESS kodunu farklı dosyalara yayar ve kod yapısının kolayca korunmasını sağlar. @İmport ifadelerini kodun herhangi bir yerine koyabilirsiniz .

Örneğin, dosyayı kullanarak içe aktarabilirsiniz. @importanahtar kelime olarak @import "dosya_adı.less" .

Dosya uzantıları

Aşağıdaki gibi farklı dosya uzantılarına bağlı olarak @import ifadelerini kullanabilirsiniz :

• .Css uzantısını kullanıyorsanız , o zaman CSS olarak kabul edilecek ve @import ifadesi olduğu gibi kalacaktır.

• Başka bir uzantı içeriyorsa, DAHA AZ olarak kabul edilecek ve içe aktarılacaktır.

• LESS uzantısı yoksa, içe aktarılmış LESS dosyası olarak eklenecek ve dahil edilecektir.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Misal

Aşağıdaki örnek, SCSS dosyasında değişken kullanımını göstermektedir -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Ardından, import_dir.less dosyasını oluşturun.

import_dir.less

.myline {
   font-size: 20px;
}

Şimdi style.less dosyasını oluşturun.

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

İmport_dir.less dosyası içe alacak style.less yolundan dosyasıhttps://www.tutorialspoint.com/less/import_dir.less.

Sen derlemek olabilir style.less için style.css aşağıdaki komutu kullanarak -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: import_directives.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Bu bölümde, önemini anlayacağız Import Optionsdaha az. LESS şunları sunar:@import stil sayfalarının hem LESS hem de CSS stil sayfalarını içe aktarmasına izin veren ifade.

Aşağıdaki tablolar, ithalat ifadelerinde uygulanacak ithalat direktiflerini listeler.

Birden fazla anahtar kelimenin kullanılmasına izin verilir @import ifadesi, ancak anahtar kelimeleri ayırmak için virgül kullanmalısınız.

Örneğin -

@import (less, optional) "custom.css";

Açıklama

İfadelerde basit değerleri veya argüman sayısını eşleştirmek istiyorsanız, korumalardan yararlanabilirsiniz. Mixin bildirimi ile ilişkilidir ve bir mixine eklenen koşulu içerir. Her miksin virgülle ayrılmış bir veya daha fazla korumaya sahip olacaktır; bir koruma parantez içine alınmalıdır. LESS yerine korumalı mixinler kullanırif/else ifadeler ve eşleşen karışımı belirtmek için hesaplamalar yapar.

Aşağıdaki tablo, açıklamaların yanı sıra farklı tipte karışım korumalarını açıklamaktadır.

Misal

Aşağıdaki örnek, LESS dosyasında mixin korumalarının kullanımını göstermektedir -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Sen derlemek olabilir style.less için style.css aşağıdaki komutu kullanarak -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: mixin-guard.html dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

Korumalar, basit değerleri veya ifadelerdeki bir dizi argümanı eşleştirmek için kullanılır. CSS seçicilerine uygulanır. Mixin'i bildirmek ve hemen çağırmak için sözdizimidir. Başarıyla ortaya çıkarmak içiniftür ifadesi; buna özellik ile katıl&, birden fazla korumayı gruplamanıza izin verir.

Misal

Aşağıdaki örnek, css LESS dosyasında guard -

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.style {
   background-color: blue;
   color: white;
}

Output

Follow these steps to see how the above code works −

• Save the above html code in the css_guard.htm file.

• Open this HTML file in a browser, the following output will get displayed.

In this chapter, we will understand how Loops work in LESS. Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combine with Guard Expressions and Pattern Matching.

Example

The following example demonstrates the use of loops in the LESS file −

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

Next, create the style.less file.

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: loop_example.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Açıklama

LESS'teki bu özellik, tek bir özellik kullanılarak birden çok özellikten virgülle veya boşlukla ayrılmış listeye değer eklenmesine izin verir. Arka plan ve dönüşüm özellikleri için kullanılabilir.

Aşağıdaki tablo, Birleştirme özelliğinin desteklediği iki tür işlevi açıklamaktadır.

Bu bölümde, nasıl olduğunu anlayalım Parent Selectorsiş. Kullanarak üst seçiciye başvurmak mümkündür&(ve işareti) operatörü. Yuvalanmış bir kuralın üst seçicileri,& operatörü ve mevcut bir seçiciye değiştirici bir sınıf veya sözde sınıf uygularken kullanılır.

Aşağıdaki tablo üst öğe seçici türlerini göstermektedir -

Misal

Aşağıdaki örnek, LESS dosyasında üst seçicinin kullanımını gösterir -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Yukarıdaki örnekte, & seçiciyi ifade eder a.

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

• Yukarıdaki html kodunu şuraya kaydedin: parent_selector1.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Veli seçicileri Eğer varsayılan dışında bir şekilde iç içe kuralın seçiciler birleştirmek gerektiğinde operatör gibi birçok kullanımı vardır. Başka bir tipik kullanım&tekrar tekrar sınıf isimleri oluşturmaktır. Daha fazla bilgi için buraya tıklayın .

Çeşitli işlevler, farklı türde bir işlevler grubundan oluşur.

Aşağıdaki tablo tüm çeşitli fonksiyon türlerini listeler -

Açıklama

Daha az, aşağıda listelenen bazı dize işlevlerini destekler -

• escape
• e
• % biçim
• replace

Aşağıdaki tablo, açıklama ile birlikte yukarıdaki dizi işlevlerini açıklamaktadır.

escape("Hello!! welcome to Tutorialspoint!")

Hello%21%21%20welcome%20to%20Tutorialspoint%21

filter: e("Hello!! welcome to Tutorialspoint!");

filter: Hello!! welcome to Tutorialspoint!;

%(string, arguments ...)

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

"Welcome, to Tutorialspoint!"

Açıklama

LESS, listenin uzunluğunu ve listedeki değerin konumunu belirtmek için kullanılan liste işlevlerinden oluşur.

Aşağıdaki tablo LESS'te kullanılan Liste işlevlerini listeler -

Açıklama

Matematik fonksiyonları, yuvarlak, karekök, güç değeri, modül, yüzde vb. Gibi sayısal işlemleri gerçekleştirmek için kullanılan yöntemleri içerir.

Aşağıdaki tablo LESS'te kullanılan Matematik İşlevlerini göstermektedir -

ceil(0.7)

1

floor(3.3)

3

percentage(0.2)

20%

round(3.77)

4

sqrt(25)

5

abs(30ft)

30ft

sin(2)

0.90929742682

asin(1)

1.5707963267948966

cos(2)

-0.4161468365471424

acos(1)

0

tan(60)

0.320040389379563

atan(1)

0.7853981633974483

pi()

3.141592653589793

pow(3,3)

27

mod(7,3)

1

min(70,30,45,20)

20

max(70,30,45,20)

70

Bu bölümde, önemini anlayacağız Type Functionsdaha az. Değerin türünü belirlemek için kullanılırlar.

Aşağıdaki tablo, LESS'te kullanılan Tip İşlevlerini gösterir .

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

Açıklama

LESS, renkleri farklı şekillerde değiştirmek ve işlemek için bir dizi yararlı renk işlevi sağlar. LESS, aşağıdaki tabloda gösterilen bazı Renk Tanımı İşlevlerini destekler -

rgb(220,20,60)

#dc143c

rgba(220,20,60, 0.5)

rgba(220, 20, 60, 0.5)

argb(rgba(176,23,31,0.5))

#80b0171f

hsl(120,100%, 50%)

#00ff00

hsla(0,100%,50%,0.5)

rgba(255, 0, 0, 0.5);

hsv(80,90%,70%)

#7db312

hsva(80,90%,70%,0.6)

rgba(125, 179, 18, 0.6)

Bu bölümde, LESS'teki Renk Kanalı İşlevlerinin önemini anlayacağız. LESS, bir kanal hakkında değer belirleyen birkaç yerleşik işlevi destekler. Kanal, değeri renk tanımına göre ayarlar. HSL renklerinde ton, doygunluk ve açıklık kanalı vardır ve RGB rengi kırmızı, yeşil ve mavi kanala sahiptir. Aşağıdaki tablo tüm renk kanalı işlevlerini listeler -

background: hue(hsl(75, 90%, 30%));

background: 75;

background: saturation(hsl(75, 90%, 30%));

background: 90%;

background: lightness(hsl(75, 90%, 30%));

background: 30%;

background: hsvhue(hsv(75, 90%, 30%));

background: 75;

background: hsvsaturation(hsv(75, 90%, 30%));

background: 90%;

background: hsvvalue(hsv(75, 90%, 30%));

background: 30%;

background: red(rgb(5, 15, 25));

background: 5;

background: green(rgb(5, 15, 25));

background: 15;

background: blue(rgb(5, 15, 25));

background: 25;

background: alpha(rgba(5, 15, 25, 1.5));

background: 2;

background: luma(rgb(50, 250, 150));

background: 71.2513323%;

background: luminance(rgb(50, 250, 150));

background: 78.53333333%;

Açıklama

LESS, renkleri farklı şekillerde değiştirmek ve işlemek ve aynı birimlerde parametre almak için bir dizi kullanışlı işlem işlevi sağlar. LESS, aşağıdaki tabloda gösterilen bazı Renk İşlem İşlevlerini destekler -

Bu bölümde anlayacağız Color Blending Functionsdaha az. Bunlar, CSS renklerinizi resimlerinizle eşleştiren Photoshop, Fireworks veya GIMP gibi görüntü düzenleyicilerde kullanılan benzer işlemlerdir.

Aşağıdaki tablo, LESS'te kullanılan renk karıştırma işlevlerini gösterir.

Komut satırını kullanarak .less dosyasını .css olarak derleyebiliriz .

Dünya Çapında Kullanım için Lessc Yükleme

Aşağıdaki komut, lessc'yi global olarak kullanılabilir kılmak için npm (düğüm paketi yöneticisi) ile lessc'yi kurmak için kullanılır.

npm install less -g

Paket adından sonra belirli bir sürüm de ekleyebilirsiniz. Örneğinnpm install [email protected] -g

Düğüm Geliştirme için Yükleme

Aşağıdaki komut, proje klasörünüze lessc'nin en son sürümünü yüklemek için kullanılır .

npm i less -save-dev

Ayrıca proje paketiniz.json'daki devDependencies ürününe de eklenir.

Lessc'nin beta sürümleri

Beta olarak etiketlenir. lessc yapı yayınlandı npmBurada yeni işlevsellik periyodik olarak geliştirilmektedir. daha az -v mevcut sürümü almak için kullanılır.

Lessc'nin yayınlanmamış bir geliştirme sürümünü yükleme

Commit - ish, lessc'nin yayınlanmamış bir sürümünü kurmaya devam ettiğimizde ve git URL'sini bağımlılık olarak tanımlamak için talimatların takip edilmesi gerektiğinde belirtilecektir. Bu, projeniz için leesc'in doğru sürümünü kullanmanızı sağlayacaktır.

Sunucu Tarafı ve Komut Satırı Kullanımı

bin/lesscdepoda ikili içerir. Windows, OS X ve nodejs ile * nix üzerinde çalışır.

Komut Satırı Kullanımı

Giriş okundu stdin kaynak kısa çizgi veya kısa çizgi (-) olarak ayarlandığında.

lessc [option option = parameter ...]  [destination]

Örneğin, derleyebiliriz .less -e .css aşağıdaki komutu kullanarak -

lessc stylesheet.less stylesheet.css

Derleyebiliriz .less -e .css aşağıdaki komutu kullanarak sonucu küçültün ve küçültün.

lessc -x stylesheet.less stylesheet.css

Seçenekler

Aşağıdaki tablo komut satırı kullanımında kullanılan seçenekleri listeler -

lessc -help
lessc -h

lessc --include-path = PATH1;PATH2

lessc -M
lessc --depends

lessc --no-color

lessc --no-ie-compat

lessc --no-js

lessc --lint
lessc -l

lessc --silent
lessc -s

lessc --strict-imports

lessc --insecure

lessc -version
lessc -v

lessc -x
lessc --compress

lessc --source-map
lessc -source-map = file.map

lessc --source-map-rootpath = dev-files/

lessc --source-map-basepath = less-files/

lessc --source-map-less-inline

lessc --source-map-map-inline

lessc --source-map-url = ../my-map.json

lessc -rp=resources/
lessc --rootpath=resources/

lessc -ru
lessc --relative-urls

lessc -sm = on
lessc --strict-math = on

lessc -su = on
lessc --strict-units = on

lessc --global-var = "background = green"

lessc --modify-var = "background = green"

lessc --url-args = "arg736357"

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all

lessc --clean-css
lessc --plugin = clean-css = "advanced"

Less dosyasını sunucu tarafında değil, ihtiyaç duyulduğunda dinamik olarak derlemek istediğinizde tarayıcıda daha az kullanılır; bunun nedeni daha azının büyük bir javascript dosyası olmasıdır.

Başlangıç ​​olarak, tarayıcıda LESS kullanmak için LESS komut dosyasını eklememiz gerekir -

<script src = "less.js"></script>

Stil etiketlerini sayfada bulmak için aşağıdaki satırı sayfaya eklememiz gerekir. Ayrıca, derlenmiş css ile stil etiketleri oluşturur.

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

Ayar Seçenekleri

Komut dosyası etiketinden önce, seçenekler programlı olarak daha az nesne üzerinde ayarlanabilir. Daha az ve ilk bağlantı etiketlerinin tüm programatik kullanımını etkileyecektir.

Örneğin, seçeneği aşağıdaki gibi ayarlayabiliriz -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Seçeneği komut dosyası etiketinde başka bir biçimde de aşağıda belirtildiği gibi ayarlayabiliriz -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Bu seçenekleri bağlantı etiketlerine de ekleyebilirsiniz.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Öznitelik seçenekleri için dikkate alınması gereken noktalar şunlardır:

• window.less <script tag <link etiketi önem seviyesidir.

• Veri öznitelikleri deve durumunda yazılamaz; bağlantı etiketi seçeneği, zaman seçenekleri olarak temsil edilir.

• Dize olmayan değerlere sahip veri öznitelikleri JSON geçerli olmalıdır.

İzleme Modu

İzle modu için env seçeneği ayarlayarak etkinleştirilebilir geliştirme ve çağrı less.watch () less.js dosya eklendikten sonra. İzleme modunun geçici olarak etkinleştirilmesini istiyorsanız , URL'ye #! İzle ekleyin.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Değişkenleri Değiştirin

LESS değişkeninin çalışma zamanı değişikliği etkinleştirildi. LESS dosyası yeni değer çağrıldığında yeniden derlenir. Aşağıdaki kod, değiştirme değişkenlerinin temel kullanımını gösterir -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Hata ayıklama

Yukarıda belirtildiği gibi url veya dumpLineNumbers seçeneğine ! DumpLineNumbers: mediaquery seçeneğini ekleyebiliriz . Ortam sorgulama seçeneği FireLESS ile kullanılabilir (DAHA AZ oluşturulan CSS stillerinin orijinal LESS dosya adını ve satır numarasını gösterir.)

Seçenekler

Less.js komut dosyası dosyasını yüklemeden önce, seçenekler global daha az nesnede ayarlanmalıdır .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

• async- Bu bir Boole türüdür. İçe aktarılan dosyalar, eşzamansız seçeneğiyle birlikte istenir. Varsayılan olarak yanlıştır.

• dumpLineNumbers- Bir string tipidir. Çıktı css dosyasında, dumpLineNumbers ayarlandığında kaynak satırı bilgileri eklenir. Belirli bir kuralın geldiği hataları ayıklamaya yardımcı olur.

• env- Bir string tipidir. Ortam, geliştirme veya üretim üzerinde çalışabilir. Belge URL'si ile başladığında geliştirme otomatik olarak ayarlanırfile:// veya yerel makinenizde mevcut.

• errorReporting - Derleme başarısız olduğunda, hata raporlama yöntemi ayarlanabilir.

• fileAsync- Bu bir Boole türüdür. Dosya protokolü olan bir sayfa mevcut olduğunda, zaman uyumsuz olarak içe aktarılıp aktarılmayacağını isteyebilir.

• functions - Nesne tipidir.

• logLevel- Bir sayı türüdür. Javascript konsolunda günlük seviyesini görüntüler.

  • 2: Bilgi ve hatalar

  • 1: Hatalar

  • 0: Hiçbir şey

• poll- Saat modunda, anketler arasında zaman milisaniye cinsinden görüntülenir. Bir tamsayı türüdür; varsayılan olarak 1000 olarak ayarlanmıştır.

• relativeUrls- URL'ler göreli olacak şekilde ayarlanır; varsayılan olarak bu seçenek yanlış olarak ayarlanmıştır. Bu, URL'lerin zaten girişten daha az dosyaya göre olduğu anlamına gelir. Bu bir Boole türüdür.

• globalVars- Global değişkenlerin listesini koda ekler. Dize türü değişkeni tırnak işaretlerine dahil edilmelidir

• modifyVars- Global değişken seçeneğinden farklıdır. Beyanı daha az dosyanızın sonunda taşır.

• rootpath - Her URL kaynağının başlangıcında yolları belirler.

• useFileCache- Oturum başına dosya önbelleği kullanır. Daha az dosyadaki önbellek, daha az dosyanın tümünün tekrar alınmayacağı modifiyeVars'ı çağırmak için kullanılır.

LESS, tarayıcılar arası dostudur. Google Chrome, Mozilla Firefox, Safari ve Internet Explorer gibi modern tarayıcıları destekler ve CSS öğelerinin yeniden kullanılmasına ve aynı anlamlarla DAHA AZ kod yazılmasına izin verir. İstemci tarafında LESS kullanırken ve JavaScript gibi kozmetik sorunları önlemek için JavaScript'i görüntülerken performans etkilerine dikkat etmelisiniz.

• Yazım hataları,
• Renk değişiklikleri,
• Texture
• Look
• Bağlantılar vb.

Web sitesinin performans seviyelerini iyileştirmek için sunucu tarafında LESS dosyalarını derleyin.

PhantomJS, Function.prototype.bind işlevini uygulamaz , bu nedenle PhantomJS altında çalışmak için es5 shim JavaScript motorunu kullanmanız gerekir . Kullanıcılar, temayı etkilemek için değişkenlerle ayarlamalar yapabilir ve üretimde LESS müşteri tarafını kullanarak gerçek zamanlı olarak gösterebilir.

Daha eski tarayıcılarda DAHA AZ çalıştırmak istiyorsanız , LESS'in desteklediği JavaScript özelliklerini ekleyen es-5 shim JavaScript motorunu kullanın . Tarayıcı tarafından desteklenmesi gereken JSON.parse komutunu kullanarak betik veya bağlantı etiketlerinde öznitelikleri kullanabilirsiniz .

Bu bölümde, sitenin işlevselliğini genişletmek için bir Eklentinin nasıl yüklenebileceğini anlayacağız. İşinizi kolaylaştırmak için eklentiler kullanılabilir.

Komut satırı

Eklentiyi komut satırını kullanarak kurmak için önce lessc eklentisini kurmanız gerekir. Eklenti , başlangıçta daha az eklenti kullanılarak kurulabilir . Aşağıdaki komut satırı clean-css eklentisini kurmanıza yardımcı olacaktır -

npm install less-plugin-clean-css

Doğrudan, aşağıdaki komutu kullanarak yüklenen eklentiyi kullanabilirsiniz -

lessc --plugin = path_to_plugin = options

Kodda Eklenti Kullanma

Node'da eklenti gereklidir ve bir diziye bir seçenek eklentisi olarak daha azına aktarılır.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

Tarayıcıda

Less.js betiğinden önce, eklenti yazarı javascript dosyasını sayfaya eklemelidir.

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Daha Az Eklenti Listesi

Aşağıdaki tablo, LESS'te bulunan eklentileri listelemektedir.

Son İşlemci / Özellik Eklentileri

Çerçeve / Kitaplık İçe Aktarıcıları

İşlev Kitaplıkları

Eklenti Yazarları için

DAHA AZ, bir yazarın daha azıyla birleşmesine izin verir.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

• pluginManager dosya yöneticileri, post işlemcileri veya ziyaretçiler ekleyebilen bir tutucu sağlar.

• setOptions işlev dizeyi geçer.

• printUsage seçenekleri açıklamak için kullanılır.

LESS'te programlı kullanımın ana noktası daha az işleme işlevidir. Bu işlev, LESS olarak aşağıdaki biçimi kullanır -

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

fonksiyon aşağıdaki şekilde de yazılabilir -

less.render(css, options, function(error, output) {})

Seçenekler a döndüren isteğe bağlı bir argümandırpromise geri aramayı belirtmezseniz ve bir promisegeri aramayı belirttiğinizde. Dosyayı dize halinde okuyarak görüntüleyebilir ve ana dosyanın dosya adı alanlarını ayarlayabilirsiniz.

SourceMap seçeneği gibi set sourcemap seçeneklerine olanak sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles ve sourceMapFileInline . Burada dikkat edilmesi gereken nokta, sourceMap seçeneğinin less.js için mevcut olmamasıdır.

Aşağıdaki biçimde gösterildiği gibi bir dinleyici ekleyerek günlüğe erişebilirsiniz -

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

Yukarıda tanımlanan işlevler isteğe bağlıdır. Bir hata görüntülenirse, hatayıcallback veya promisedaha azda mevcut. işlemek .

Bu bölümde, LESS'teki çevrimiçi derleyicilerin önemini anlayacağız. Çevrimiçi derleyiciler, daha az kodu css koduna derlemek için kullanılır. Çevrimiçi derleyici araçları, css kodunu oluşturmaya kolayca yardımcı olur. Aşağıdakiler mevcut çevrimiçi daha az derleyicilerdir -

• winless.org/online-less-compiler

• lesstester.com

• dopefly.com/less-converte

• lessphp.gpeasy.com/demo

• leafo.net/lessphp/editor

• estFiddle

Daha Az Destekli Çevrimiçi Web IDE'leri / Oyun Alanları

Aşağıda, Daha Az destekli mevcut Çevrimiçi Web IDE'leri bulunmaktadır.

Bu bölümde, anlayacak GUI için LDŞÖ . Platformunuz için farklı DAHA AZ araçları kullanabilirsiniz. İçin komut satırı kullanımı ve araçlar bu tıklayıp linki .

Aşağıdaki tablo, çapraz platformu destekleyen GUI derleyicilerini listeler.

Aşağıdaki tablo, Windows platformunu destekleyen GUI derleyicilerini listeler.

Aşağıdaki tablo, OS X platformunu destekleyen GUI derleyicilerini listeler.

The following table lists the GUI compilers that supports OS X platform.

In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.

Let us now discuss editors and IDEs for LESS.

Sublime Text 2 ve 3

Yüce metin aşağıdaki tabloda listelendiği gibi LDŞÖ'nün için farklı seçenekler sunar -

Tutulma

Eclipse , aşağıdaki tabloda listelendiği gibi LESS için iki eklentiye sahiptir -

Görsel stüdyo

Visual Studio , LESS için aşağıdaki farklı seçeneklere sahiptir -

Dreamweaver

Dreamweaver ile çalışırken aşağıdaki noktaların dikkate alınması gerekir .

• Web tasarımcıları ve geliştiricileri tarafından uygulamalar ve web siteleri oluşturmak için kullanılan bir Adobe uygulamasıdır.

• Tarayıcılar, cihazlar ve tabletler dahil olmak üzere birden fazla platformda çalışabilir.

• Web tasarımcıları, web sitesi prototipleri oluşturmak için Dreamweaver'ı kullanır.

• DMXzone Less CSS Compiler , tüm LESS CSS güçlerini doğrudan Dreamweaver'da yapar.

Notepad ++ 6.x

Notepad ++ üzerinde çalışırken aşağıdaki noktaların dikkate alınması gerekir .

• Notepad ++, sekmeli düzenlemeyi, yani tek bir pencerede birden çok açık dosyayla çalışmayı destekleyen ücretsiz bir metin editörü ve kaynak kodu editörüdür.

• LESS for Notepad ++, .less dosyalar için sözdizimi vurgulama veya renklendirme sağlayan bir xml dosyasıdır. Daha fazla bilgi almak için bu bağlantıya tıklayın .

• Notepad ++ yüklemek için bu bağlantıyı tıklayın .

Node.js Derleyicileri

LESS için kullanılan Node.js derleyicileri aşağıdadır.

homurtusuz

Grunt, bir Node görev koşucusu. LESS dosyalarınızda her değişiklik yaptığınızda stil sayfalarınızı derler.

montajsız

assemble-less, LESS dosyasını CSS'ye derlemek için güçlü bir grunt eklentisidir. Daha az görev, LESS paketlerini, UI bileşenlerini, sıkıştırılmış stil sayfalarını veya temaları tanımlamak için JSON ve Lo - tire (alt çizgi) şablonunu çeker.

yutkusuz

Gulp için LESS eklentisidir. gulp-minify-css , CSS'nizi küçültmek için kullanılır. gulp-sourcemaps , sourcemaps kitaplığını oluşturmak için kullanılır.

RECESS

LESS üzerine kurulu ve CSS kodunuzu optimize etmeye yardımcı olan açık kaynaklı bir araçtır. CSS kodunu hatasız, temiz ve yönetilebilir tutar.

otomatik olmayan

Bu bir olan .less dosya gözlemcisi. Bağımlılık izleme ve Çapraz platform bildirimi içerir.

Less.js için Ara Yazılım Bağlayın

LESS dosyalarının JS çerçevesini bağlamak için işlemeye izin vermek için kullanılır. Kaynak dosyayı istek üzerine derler ve derlenen verileri sonraki istek için önbelleğe alır.

Diğer Teknolojiler

Aşağıda, bir LESS kodunu derlemenize yardımcı olacak birkaç diğer teknoloji bulunmaktadır.

Wro4j Koşucu CLI

Sen indirebilirsiniz wro4j-runner.jar ve aşağıdaki komutu kullanarak CSS içinde AZ kodunu derlemek olabilir -

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

Wro4j Runner CLI hakkında daha fazla bilgi için aşağıdaki bağlantıyı ziyaret edebilirsiniz.

CSS :: LESSp

Bu modül, LESS dosyasını CSS dosyasına ayrıştırmak ve derlemek için kullanılır. Derlemek için kullanılan komut aşağıdadır -

lessp.pl styles.less > styles.css

CSS :: LESSp hakkında daha fazla bilgi için aşağıdaki bağlantıyı ziyaret edebilirsiniz

Windows Komut Dosyası Ana Bilgisayarı

Aşağıda, Windows üzerinde çalışacak komut satırı derleyicisi verilmiştir.

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

Windows için Less.js hakkında daha fazla bilgi edinmek için aşağıdaki bağlantıyı ziyaret edebilirsiniz

noktasız

Aşağıda, pencereler için noktasız çalışan bir komut satırı derleyicisi verilmiştir.

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

Dotless hakkında daha fazla bilgi edinmek için aşağıdaki bağlantıyı ziyaret edebilirsiniz

UI / Tema Çerçeveleri ve Bileşenleri

LESS, aşağıdaki tabloda listelenen bazı UI / Tema çerçevelerini destekler -

Izgara Sistemleri

LESS, aşağıdaki tabloda listelenen ızgara sistemleri çerçevelerini destekler -

Mixin Kitaplıkları

LESS, aşağıdaki tabloda listelenen mixin kitaplıkları sağlar -