LESS - İşlevler

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.