WENIGER - Installation

In diesem Kapitel erfahren Sie Schritt für Schritt, wie Sie WENIGER installieren.

Systemanforderungen für WENIGER

Operating System - Plattformübergreifend
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Installation von WENIGER

Lassen Sie uns nun die Installation von LESS verstehen.

Step 1 - Wir brauchen NodeJsWENIGER Beispiele ausführen. Öffnen Sie den Link, um NodeJs herunterzuladenhttps://nodejs.org/en/sehen Sie einen Bildschirm wie unten gezeigt -

Laden Sie die Version mit den neuesten Funktionen der Zip-Datei herunter .

Step 2- Führen Sie das Setup aus, um die Datei Node.js auf Ihrem System zu installieren .

Step 3- Installieren Sie anschließend WENIGER über NPM (Node Package Manager) auf dem Server. Führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

npm install -g less

Step 4 - Nach erfolgreicher Installation von WENIGER sehen Sie die folgenden Zeilen an der Eingabeaufforderung -

`-- [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]

Beispiel

Das Folgende ist ein einfaches Beispiel für WENIGER.

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

Lassen Sie uns nun eine Datei style.less erstellen , die CSS sehr ähnlich ist. Der einzige Unterschied besteht darin, dass sie mit der Erweiterung .less gespeichert wird . Sowohl die Dateien .html als auch .less sollten im Ordner erstellt werdennodejs.

style.less

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

h3 {
   color: @color;
}

Kompilieren Sie die Datei style.less mit dem folgenden Befehl in style.css :

lessc style.less style.css

Wenn Sie den obigen Befehl ausführen, wird die Datei style.css automatisch erstellt. Wenn Sie die WENIGER-Datei ändern, müssen Sie den obigen Befehl in der Datei ausführencmdund dann wird die Datei style.css aktualisiert.

Die Datei style.css enthält den folgenden Code, wenn Sie den obigen Befehl ausführen:

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Ausgabe

Lassen Sie uns nun die folgenden Schritte ausführen, um zu sehen, wie der obige Code funktioniert:

Speichern Sie den obigen HTML-Code in der hello.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.