So erstellen Sie eine LESS-Datei und kompilieren sie

Übersicht

Ein Leaner Style Sheets (LESS) ist eine dynamische Vorverarbeitungssprache, deren Grundsprache Cascading Style Sheets (CSS) ist. Alle Vorverarbeitungssprachen sind aktualisierte Versionen der Basissprache, sodass LESS auch über viele zusätzliche Funktionen verfügt. LESS verfügt über Funktionen wie Variablen, übergeordnete Selektoren, Mixins und verschachtelte Selektoren. In Java wird durch das Kompilieren des Quellcodes der Datei „.java“ die Ausgabedatei „.class“ generiert. Ebenso wird durch das Kompilieren der Datei „.less“ der LESS-Datei eine neue Datei „ .css“ ” als Ausgabe.

Methode

Um eine LESS-Datei zu erstellen und zu kompilieren, müssen wir die folgenden Schritte ausführen -

• Öffnen Sie Terminal auf Ihrem Desktop oder in der Befehlszeile (cmd). Verwenden Sie den Node Package Manager (npm), um die Learner Stylesheet (LESS)-Umgebung global auf Ihrem Computer zu installieren.

npm install less –g

• Erstellen Sie einen Ordner auf Ihrem Desktop. Öffnen Sie nun einen beliebigen Texteditor und schreiben Sie LESS Code hinein.

• Speichern Sie die Datei mit dem „.less“-Code als „style.less“.

• Öffnen Sie nun die Befehlszeilenschnittstelle (CLI) und verwenden Sie den Befehl cd-Ordnername, um zu dem Unterordner zu gelangen, in dem Sie die Datei „style.less“ erstellt haben. „cd“ bedeutet Verzeichnis wechseln.

• Nachdem Sie den Ordner erreicht haben, in dem sich die Less-Datei befindet, geben Sie den folgenden Befehl ein, um „style.less“ zu kompilieren, und eine „style.css“-Datei wird generiert.

lessc style.less > style.css

• Öffnen Sie die Datei „style.css“. Der darin enthaltene Code ist der konvertierte css-Code der Datei „style.less“.

Funktionen

Die Hauptfunktionen von Leaner Style Sheets (LESS) sind −

• Variablen− Less Language verfügt über eine Funktion zum Erstellen von Variablen und zum Speichern von CSS-Eigenschaftswerten darin. Das Präfix zum Erstellen von Variablen in weniger Dateien lautet „@“. Zum Beispiel: @width:10rem, @height:10rem, @background: green usw.

• Mischen− Diese Funktion bietet die Möglichkeit, Stilcode ohne Duplizierung zu schreiben. Wir können die oben erstellten Stile als Stile für andere Elemente wiederverwenden.

Zum Beispiel −

@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
   width:@width;
   height:@height;
}
.profile{
   .box(); //.box() is used as mixins to inherit the property of box in profile
}

Algorithmus

Schritt 1 – Bevor Sie mit dem Schreiben von Code beginnen, installieren Sie den Less-Compiler mit der oben angegebenen Methode. Wenn Sie den „less“-Compiler installiert haben, können Sie dies auf der Befehlszeilenschnittstelle mit dem folgenden Befehl überprüfen.

lessc –v

Wenn Sie den „less“-Compiler auf Ihrem Computer installiert haben, erhalten Sie die Ausgabe mit seiner Versionsnummer.

Schritt 2 − Erstellen Sie einen Ordner mit dem Namen „LESS“ auf dem Desktop. Erstellen Sie eine HTML-Datei in einem beliebigen Texteditor und schreiben Sie darin HTML-Code.

Schritt 3 – Erstellen Sie eine „style.less“-Datei im selben Ordner und schreiben Sie den Code für die Gestaltung der Webseite.

@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
   background-color: @background;
   color: @color;
   text-align: @textAlign;
   padding: 1rem;
   border-radius: 5px;
}
span{
   text-decoration: @textDecoration;
}

Schritt 4 − Gehen Sie nun über die Befehlszeilenschnittstelle (CLI) in den Unterordner, den wir auf dem Desktop erstellt haben. Verwenden Sie die Befehle „cd desktop, cdless“, um das Ziel zu erreichen.

Schritt 5 − Verwenden Sie nun den Befehl, um die Datei „style.less“ zu kompilieren.

lessc style.less > style.css

Schritt 6 – Nach dem Kompilieren der Datei wurde die Datei „style.css“ erfolgreich erstellt. Jetzt kann die Webseite mit dem entsprechenden Stil in den Browser geladen werden.

Beispiel

In diesem Beispiel sehen wir, wie die Webseite aussieht, wenn die Less-Datei nicht kompiliert ist, und wie sie aussieht, nachdem sie kompiliert wurde. Um dies zu erreichen, erstellen wir eine Webseite, die die CSS-Datei und die „less“-Datei in einem Ordner verknüpft.

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>LESS Example</title>
   <style>
      @textDecoration:underline;
      @background:green;
      @color:white;
      @textAlign:center;
      h1{
         background-color: @background;
         color: @color;
         text-align: @textAlign;
         padding: 1rem;
         border-radius: 5px;
      }
      span{
         text-decoration: @textDecoration;
      }
      h1 {
         background-color: green;
         color: white;
         text-align: center;
         padding: 1rem;
         border-radius: 5px;
      }
      span {
         text-decoration: underline;
      }
   </style>
</head>
<body>
   <h1>LESS</h1>
   <h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>

Das Bild unten zeigt die Ausgabe beim Kompilieren von „style.less“. Wenn die Webseite erstellt und mit CSS verknüpft wird, wird auf der Seite nur der HTML-Teil ohne die Stile angezeigt. Nach dem Kompilieren der Datei „style.less“ werden die in der Datei geschriebenen Stile kompiliert und eine style.css-Datei erstellt, die die Ausgabe der Webseite mit den unten angegebenen entsprechenden Stilen anzeigt.

Fazit

Lesser Style Sheets (LESS) sind sehr nützlich, wenn Sie große Projekte erstellen, die die Verwaltung einer riesigen „CSS“-Datei erfordern. Daher bietet „LESS“ die Funktionalität von Variablen, wodurch Code-Unordnung vermieden werden kann. Es ist einfacher, „LESS“-Code im Vergleich zu „CSS“ zu pflegen. Wenn wir beispielsweise den Stil einer Schaltfläche auf der Website ändern möchten, sagen wir, wir müssen den Rahmenradius und die Hintergrundfarbe der Schaltfläche ändern, dann müssen wir dies tun Sie müssen nur zwei Änderungen an einer Variablen vornehmen, anstatt an jedem CSS-Element Stiländerungen vorzunehmen, was das Leben des Entwicklers einfacher macht.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine LESS-Datei und kompilieren sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!