WENIGER - Funktionen

Beschreibung

WENIGER ordnet JavaScript-Code der Manipulation von Werten zu und verwendet vordefinierte Funktionen, um HTML-Elementaspekte im Stylesheet zu manipulieren. Es bietet verschiedene Funktionen zum Bearbeiten von Farben wie Rundungsfunktion, Bodenfunktion, Deckenfunktion, Prozentfunktion usw.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Funktionen in der LESS-Datei -

<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>

Erstellen Sie nun die Datei style.less .

style.less

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

Sie können die Datei style.less mit dem folgenden Befehl in style.css kompilieren :

lessc style.less style.css

Führen Sie nun den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

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

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der functions.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Sie erhalten die folgende Ausgabe.