WENIGER - Kurzanleitung

LESS ist ein CSS-Vorprozessor, der anpassbare, verwaltbare und wiederverwendbare Stylesheets für Websites ermöglicht. WENIGER ist eine dynamische Stylesheet-Sprache, die die Funktionen von CSS erweitert. WENIGER ist auch browserübergreifend.

CSS Preprocessor ist eine Skriptsprache, die CSS erweitert und in die reguläre CSS-Syntax kompiliert wird, damit sie von Ihrem Webbrowser gelesen werden kann. Es bietet Funktionen wie Variablen , Funktionen , Mixins und Operationen , mit denen Sie dynamisches CSS erstellen können.

Warum WENIGER?

Lassen Sie uns jetzt verstehen, warum wir WENIGER verwenden.

• WENIGER unterstützt die schnellere und einfachere Erstellung sauberer, browserübergreifender CSS.

• LESS wurde in JavaScript entwickelt und auch für die Verwendung in Live- Dateien erstellt, die schneller kompiliert werden als andere CSS-Vorprozessoren.

• WENIGER hält Ihren Code modular, was sehr wichtig ist, da er lesbar und leicht änderbar ist.

• Eine schnellere Wartung kann durch die Verwendung von WENIGER Variablen erreicht werden .

Geschichte

WENIGER wurde von entworfen Alexis Sellierim Jahr 2009. WENIGER ist ein Open-Source. Die erste Version von LESS wurde in Ruby geschrieben; In späteren Versionen wurde die Verwendung von Ruby durch JavaScript ersetzt.

Eigenschaften

• Sauberer und besser lesbarer Code kann auf organisierte Weise geschrieben werden.

• Wir können Stile definieren und sie können im gesamten Code wiederverwendet werden.

• WENIGER basiert auf JavaScript und ist eine super Menge von CSS.

• LESS ist ein agiles Tool, das das Problem der Code-Redundanz löst.

Vorteile

• WENIGER generiert leicht CSS, das in allen Browsern funktioniert.

• WENIGER ermöglicht es Ihnen, mithilfe von Verschachtelung besseren und gut organisierten Code zu schreiben .

• Die Wartung kann durch die Verwendung von Variablen schneller erreicht werden .

• Mit WENIGER können Sie die gesamten Klassen einfach wiederverwenden, indem Sie sie in Ihren Regelsätzen referenzieren.

• WENIGER bietet die Verwendung von Operationen , die das Codieren beschleunigen und Zeit sparen.

Nachteile

• Es braucht Zeit, um herauszufinden, ob Sie mit der CSS-Vorverarbeitung noch nicht vertraut sind.

• Aufgrund der engen Kopplung zwischen den Modulen sollten mehr Anstrengungen unternommen werden, um abhängige Module wiederzuverwenden und / oder zu testen.

• WENIGER hat weniger Framework im Vergleich zu älteren Präprozessoren wie SASS, die aus den Frameworks Compass , Gravity und Susy bestehen .

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

Beschreibung

Es handelt sich um eine Gruppe von CSS-Eigenschaften, die die Verwendung von Eigenschaften einer Klasse in einer anderen Klasse ermöglichen und den Klassennamen als Eigenschaften enthalten. In WENIGER können Sie das Mixin auf dieselbe Weise wie den CSS-Stil mithilfe der Klassen- oder ID-Auswahl deklarieren. Es kann mehrere Werte speichern und bei Bedarf im Code wiederverwendet werden.

Beispiel

Das folgende Beispiel zeigt die Verwendung verschachtelter Regeln in der LESS-Datei.

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

Erstellen Sie als Nächstes die Datei style.less .

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

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

lessc style.less style.css

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

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der nested_rules.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

Sie können die Anweisungen wie Medien und Keyframe auf dieselbe Weise verschachteln, wie Sie die Selektoren verschachteln. Sie können die Direktive oben platzieren und ihre relativen Elemente werden innerhalb ihres Regelsatzes nicht geändert. Dies ist als Blasenbildungsprozess bekannt.

Beispiel

Das folgende Beispiel zeigt die Verwendung der verschachtelten Anweisungen und das Sprudeln in der WENIGER-Datei.

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

Erstellen Sie als Nächstes die Datei style.less .

style.less

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

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

lessc style.less style.css

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

style.css

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der nested_directives_bubbling.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

WENIGER unterstützt einige arithmetische Operationen wie Plus (+), Minus (-), Multiplikation (*) und Division (/) und kann mit einer beliebigen Zahl, Farbe oder Variablen arbeiten. Operationen sparen viel Zeit, wenn Sie Variablen verwenden und an einfacher Mathematik arbeiten möchten.

Beispiel

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

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

Erstellen Sie als Nächstes die Datei style.less .

style.less

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

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

lessc style.less style.css

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

style.css

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der operations.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

Es erstellt Selektoren dynamisch und verwendet Eigenschaften oder Variablenwerte als beliebige Zeichenfolge.

Beispiel

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

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

Erstellen Sie nun die Datei style.less .

style.less

p {
   color: ~"green";
}

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

lessc style.less style.css

Führen Sie den obigen Befehl aus. Die Datei style.css wird automatisch mit dem folgenden Code erstellt:

style.css

p {
   color: green;
}

Alles, was in ~ "some_text" geschrieben ist, wird nach dem Kompilieren des LESS-Codes in CSS-Code als some_text angezeigt .

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 escaping.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

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

Beschreibung

Namespaces werden verwendet, um die Mixins unter einem gemeinsamen Namen zu gruppieren. Mithilfe von Namespaces können Sie Namenskonflikte vermeiden und eine Gruppe von Mixins von außen kapseln.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Namespaces und Accessoren in der LESS-Datei.

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

Erstellen Sie nun die Datei style.less .

style.less

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

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

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

lessc style.less style.css

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

style.css

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der namespaces_accessors.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

Der Variablenbereich gibt den Ort der verfügbaren Variablen an. Die Variablen werden im lokalen Bereich durchsucht. Wenn sie nicht verfügbar sind, sucht der Compiler im übergeordneten Bereich.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Namespaces und Accessoren in der LESS-Datei.

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

Erstellen Sie nun die Datei style.less .

style.less

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

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

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

lessc style.less style.css

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

style.css

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der scope.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

Kommentare machen den Code für die Benutzer klar und verständlich. Sie können sowohl den Blockstil als auch die Inline-Kommentare im Code verwenden. Wenn Sie jedoch den LESS-Code kompilieren, werden die einzeiligen Kommentare nicht in der CSS-Datei angezeigt.

Beispiel

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

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

Erstellen Sie nun die Datei style.less .

style.less

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

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

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

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

.myclass1 {
   color: red;
}

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der comments.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

Es wird verwendet, um den Inhalt der LESS- oder CSS-Dateien zu importieren.

Beispiel

Das folgende Beispiel zeigt die Verwendung des Imports in die WENIGER Datei -

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

Erstellen Sie nun die Datei myfile.less .

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Erstellen Sie nun die Datei style.less .

style.less

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

Die Datei myfile.less , die vom Pfad in style.less importiert wirdhttps://www.tutorialspoint.com/less/myfile.less

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

lessc style.less style.css

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

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der importing.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

In diesem Kapitel werden wir die Variablen in WENIGER diskutieren. WENIGER ermöglicht die Definition von Variablen mit einem @ -Symbol. Die Variablenzuweisung erfolgt mit acolon(:).

Die folgende Tabelle zeigt die Verwendung von WENIGER Variablen im Detail.

Extend ist eine WENIGER Pseudoklasse, die andere Selektorstile in einem Selektor mithilfe von erweitert :extend Wähler.

Beispiel

Das folgende Beispiel zeigt die Verwendung von verlängern in der WENIGER Datei -

verlängern_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>

Erstellen Sie als Nächstes die Datei style.less .

style.less

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

.style {
   background: green;
}

Sie können die kompilieren extend.less Datei zu extend.css mithilfe des folgenden Befehls -

lessc style.less style.css

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

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der extend_syntax.htm Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Syntax erweitern

Extend wird in einen Regelsatz eingefügt oder an einen Selektor angehängt. Es ähnelt einer Pseudoklasse, die eine oder mehrere Klassen enthält, die durch Komma getrennt sind. Verwenden des optionalen Schlüsselwortsallkann jedem Selektor gefolgt werden.

Beispiel

Das folgende Beispiel zeigt die Verwendung der Extend-Syntax in der LESS-Datei.

verlängern_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>

Erstellen Sie nun die Datei style.less .

style.less

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

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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

lessc style.less style.css

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

style.css

.style {
   background: #BF70A5;
}

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

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der extend_syntax.htm Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

In der folgenden Tabelle sind alle Arten der Erweiterungssyntax aufgeführt, die Sie in WENIGER verwenden können.

Im Folgenden sind die Arten von Anwendungsfällen für die Erweiterung aufgeführt

Mixins ähneln Funktionen in Programmiersprachen. Mixins sind eine Gruppe von CSS-Eigenschaften, mit denen Sie Eigenschaften einer Klasse für eine andere Klasse verwenden können und deren Eigenschaften den Klassennamen enthalten. In WENIGER können Sie ein Mixin auf dieselbe Weise wie im CSS-Stil mithilfe der Klassen- oder ID-Auswahl deklarieren. Es kann mehrere Werte speichern und bei Bedarf im Code wiederverwendet werden.

Die folgende Tabelle zeigt die Verwendung von WENIGER Mixins im Detail.

Beispiel

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

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

Erstellen Sie als Nächstes die Datei style.less .

style.less

.p1 {
   color:red;
}

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

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

Sie können style.less zu style.css kompilieren , indem Sie den folgenden Befehl verwenden:

lessc style.less style.css

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

style.css

.p1 {
   color: red;
}

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

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

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der less_mixins.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Die Klammern sind beim Aufrufen von Mixins optional. Im obigen Beispiel beide Aussagen.p1(); und .p1; mach das selbe.

Beschreibung

Parametrische Mixins verwenden einen oder mehrere Parameter, die die Funktionalität von LESS erweitern, indem sie Argumente und deren Eigenschaften verwenden, um die Mixin-Ausgabe anzupassen, wenn sie in einen anderen Block gemischt werden.

Betrachten Sie zum Beispiel ein einfaches WENIGER Code-Snippet -

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

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

Hier verwenden wir das parametrische Mixin als Grenze mit drei Parametern - Breite, Stil und Farbe. Mit diesen Parametern können Sie die Mixin-Ausgabe mit dem übergebenen Parameterwert anpassen.

In der folgenden Tabelle werden die verschiedenen Arten von parametrischen Mixins zusammen mit der Beschreibung beschrieben.

In diesem Kapitel werden wir die Bedeutung von verstehen Mixins as Functions. Like functions, mixins can be nested, can accept parameters, and return values too.

The following table demonstrates the use of mixins as functions in details.

Description

Detached ruleset contains rulesets such as properties, nested rulesets, variables declaration, mixins, etc. It is stored in a variable and included in another structure; all the properties of the ruleset get copied to that structure.

Example

The following example shows how to pass a ruleset to mixin in the LESS file −

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

Next, create the style.less file.

style.less

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

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

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

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

Output

Follow these steps to see how the above code works −

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

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

Scoping

All variables and mixins in detached ruleset are available wherever the ruleset called or defined. Otherwise, both the caller and the definition scopes are available by default. The declaration scope takes the priority when both scopes contain same mixin or variable. Detached ruleset body is defined in the declaration scope. It does not change its scope after the detached ruleset is copied from one variable to another.

The following table lists all the types of scope −

Description

The @import directive is used to import the files in the code. It spreads the LESS code over different files and allows to maintain the structure of code easily. You can put the @import statements anywhere in the code.

For instance, you can import the file by using @import keyword as @import "file_name.less".

File Extensions

You can use the @import statements depending on the different file extensions such as −

• If you are using .css extension, then it will be considered as CSS and the @import statement remains as it is.

• If it contains any other extension, then it will be considered as LESS and will be imported.

• If there is no LESS extension, then it will appended and included as imported LESS file.

@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

Example

The following example demonstrates the use of variable in the SCSS file −

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

Next, create the import_dir.less file.

import_dir.less

.myline {
   font-size: 20px;
}

Now, create the style.less file.

style.less

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

The import_dir.less file will get imported into style.less file from the path https://www.tutorialspoint.com/less/import_dir.less.

You can compile the style.less 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

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Output

Follow these steps to see how the above code works −

• Save the above html code in the import_directives.html file.

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

In this chapter, we will understand the importance of Import Options in LESS. LESS offers the @import statement that allows the style sheets to import both LESS and CSS style sheets.

The following tables lists the import directives that will be implemented in the import statements.

More than one keyword is allowed to use in the @import statement, however you have to use commas to seperate the keywords.

For instance −

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

Description

If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will have one or more guards which are separated by comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin.

The following table describes the different types of mixins guards along with description.

Example

The following example demonstrates the use of mixin guards in the LESS file −

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

Now, create the style.less file.

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

You can compile the style.less 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

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

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

Output

Follow these steps to see how the above code works −

• Save the above html code in the mixin-guard.html file.

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

Description

Guards are used to match simple values or a number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.

Example

The following example demonstrates the use of css guard in the LESS file −

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>

Next, create the style.less file.

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();

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

.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;
}

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der loop_example.htm Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Beschreibung

Diese Funktion in WENIGER ermöglicht das Hinzufügen von Werten zu durch Kommas oder Leerzeichen getrennten Listen von mehreren Eigenschaften mithilfe einer einzigen Eigenschaft. Es kann für Hintergrund- und Transformationseigenschaften verwendet werden.

In der folgenden Tabelle werden die beiden Arten von Funktionen beschrieben, die von der Zusammenführungsfunktion unterstützt werden.

Lassen Sie uns in diesem Kapitel verstehen, wie Parent SelectorsArbeit. Es ist möglich, den übergeordneten Selektor mit dem zu referenzieren&(kaufmännisches Und) Operator. Übergeordnete Selektoren einer verschachtelten Regel werden durch die dargestellt& Operator und wird verwendet, wenn eine modifizierende Klasse oder Pseudoklasse auf einen vorhandenen Selektor angewendet wird.

Die folgende Tabelle zeigt die Typen der übergeordneten Auswahl -

Beispiel

Das folgende Beispiel zeigt die Verwendung des übergeordneten Selektors in der WENIGER-Datei.

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

Erstellen Sie als Nächstes die Datei style.less .

style.less

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

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

lessc style.less style.css

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

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Im obigen Beispiel ist & bezieht sich auf Selektor a.

Ausgabe

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

• Speichern Sie den obigen HTML-Code in der parent_selector1.htm Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.

Der Operator " Übergeordnete Selektoren" hat viele Verwendungszwecke, z. B. wenn Sie die Selektoren der verschachtelten Regel auf andere als die Standardart kombinieren müssen. Eine andere typische Verwendung von&ist es, Klassennamen wiederholt zu generieren. Für weitere Informationen klicken Sie hier .

Verschiedene Funktionen bestehen aus einer Gruppe von Funktionen unterschiedlicher Art.

In der folgenden Tabelle sind alle Arten von verschiedenen Funktionen aufgeführt.

Beschreibung

Weniger unterstützt einige der unten aufgeführten Zeichenfolgenfunktionen -

• escape
• e
• % Format
• replace

In der folgenden Tabelle werden die obigen Zeichenfolgenfunktionen zusammen mit der Beschreibung beschrieben.

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

Beschreibung

WENIGER besteht aus Listenfunktionen, mit denen die Länge der Liste und die Position des Werts in der Liste angegeben werden.

In der folgenden Tabelle sind die in LESS - verwendeten Listenfunktionen aufgeführt.

Beschreibung

Zu den mathematischen Funktionen gehören Methoden, die zum Ausführen numerischer Operationen wie Rundung, Quadratwurzel, Leistungswert, Modul, Prozentsatz usw. verwendet werden.

Die folgende Tabelle zeigt die in WENIGER verwendeten mathematischen Funktionen -

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

In diesem Kapitel werden wir die Bedeutung von verstehen Type Functionsin weniger. Sie werden verwendet, um den Typ des Werts zu bestimmen.

Die folgende Tabelle zeigt die Typ - Funktionen in weniger verwendet.

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

Beschreibung

WENIGER bietet eine Reihe nützlicher Farbfunktionen, mit denen Sie Farben auf unterschiedliche Weise ändern und bearbeiten können. WENIGER unterstützt einige der Farbdefinitionsfunktionen, wie in der folgenden Tabelle gezeigt -

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)

In diesem Kapitel werden wir die Bedeutung von Farbkanalfunktionen in WENIGER verstehen. WENIGER unterstützt nur wenige integrierte Funktionen, die den Wert eines Kanals festlegen. Der Kanal stellt den Wert abhängig von der Farbdefinition ein. Die HSL-Farben haben Farbton-, Sättigungs- und Helligkeitskanal und die RGB-Farbe hat Rot-, Grün- und Blaukanal. In der folgenden Tabelle sind alle Farbkanalfunktionen aufgeführt -

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

Beschreibung

WENIGER bietet eine Reihe nützlicher Betriebsfunktionen, um Farben auf unterschiedliche Weise zu ändern und zu bearbeiten und Parameter in denselben Einheiten zu übernehmen. WENIGER unterstützt einige der Farboperationsfunktionen, wie in der folgenden Tabelle gezeigt -

In diesem Kapitel werden wir das verstehen Color Blending Functionsin weniger. Dies sind ähnliche Vorgänge, die in Bildbearbeitungsprogrammen wie Photoshop, Fireworks oder GIMP verwendet werden und die Ihre CSS-Farben an Ihre Bilder anpassen.

Die folgende Tabelle zeigt die in WENIGER verwendeten Farbüberblendungsfunktionen.

Mit Hilfe der Befehlszeile, können wir die kompilieren .Weniger Datei zu .css .

Lessc für den weltweiten Einsatz installieren

Der folgende Befehl wird verwendet, um lessc mit npm (Node Package Manager) zu installieren, um lessc global verfügbar zu machen.

npm install less -g

Sie können auch eine bestimmte Version nach dem Paketnamen hinzufügen. Zum Beispielnpm install [email protected] -g

Installation für die Knotenentwicklung

Der folgende Befehl wird verwendet, um die neueste Version von lessc in Ihrem Projektordner zu installieren .

npm i less -save-dev

Es wird auch zu den devDependencies in Ihrem Projekt package.json hinzugefügt.

Beta-Versionen von lessc

Es wird als Beta markiert, wenn die lessc Struktur wird veröffentlicht zu npmHier wird die neue Funktionalität regelmäßig weiterentwickelt. less -v wird verwendet, um die aktuelle Version abzurufen .

Installation einer unveröffentlichten Entwicklungsversion von lessc

Das Commit-ish muss angegeben werden, wenn wir eine unveröffentlichte Version von lessc installieren und die Anweisungen zum Identifizieren einer Git-URL als Abhängigkeit befolgt werden müssen. Dadurch wird sichergestellt, dass Sie die richtige Version von leesc für Ihr Projekt verwenden.

Serverseitige und Befehlszeilenverwendung

bin/lesscEnthält Binärdateien im Repository. Es funktioniert mit Windows, OS X und NodeJS unter * nix.

Befehlszeilenverwendung

Eingang wird gelesen von stdin wenn die Quelle auf Bindestrich oder Bindestrich (-) eingestellt ist.

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

Zum Beispiel können wir kompilieren .less zu .css mit dem folgenden Befehl -

lessc stylesheet.less stylesheet.css

Wir können kompilieren .less zu .css durch und minimieren Sie das Ergebnis mit dem folgenden Befehl.

lessc -x stylesheet.less stylesheet.css

Optionen

In der folgenden Tabelle sind die Optionen aufgeführt, die bei der Verwendung der Befehlszeile verwendet werden.

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 wird im Browser verwendet, wenn Sie die Less-Datei bei Bedarf dynamisch kompilieren möchten und nicht auf der Serverseite. Dies liegt daran, dass weniger eine große Javascript-Datei ist.

Zunächst müssen wir das LESS-Skript hinzufügen, um LESS im Browser verwenden zu können.

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

Um die Stil-Tags auf der Seite zu finden, müssen wir die folgende Zeile auf der Seite hinzufügen. Außerdem werden die Style-Tags mit dem kompilierten CSS erstellt.

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

Einstellungsoptionen

Vor dem Skript-Tag können programmgesteuert Optionen für das Objekt weniger festgelegt werden. Dies wirkt sich auf die gesamte programmatische Verwendung von weniger und die anfänglichen Link-Tags aus.

Zum Beispiel können wir die Option wie folgt einstellen:

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

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

Wir können die Option auch in einem anderen Format für das Skript-Tag festlegen, wie unten angegeben -

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

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

Sie können diese Optionen auch zu den Link-Tags hinzufügen.

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

Die Punkte, die für Attributoptionen berücksichtigt werden müssen, sind:

• window.less <script tag <link tag ist die Wichtigkeitsstufe.

• Die Datenattribute können nicht in Kamelbuchstaben geschrieben werden. Die Link-Tag-Option wird als Zeitoption dargestellt.

• Die Datenattribute mit Nicht-String-Werten sollten JSON-gültig sein.

Watch-Modus

Der Überwachungsmodus kann aktiviert werden, indem die Option env auf Entwicklung gesetzt und less.watch () aufgerufen wird, nachdem die Datei less.js hinzugefügt wurde. Wenn Sie möchten, dass der Überwachungsmodus vorübergehend aktiviert wird, fügen Sie der URL #! Watch hinzu .

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

Variablen ändern

Die Laufzeitänderung der Variablen WENIGER ist aktiviert. WENIGER Datei wird neu kompiliert, wenn ein neuer Wert aufgerufen wird. Der folgende Code zeigt die grundlegende Verwendung von Änderungsvariablen -

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

Debuggen

Wir können die Option ! DumpLineNumbers: mediaquery zur URL- oder dumpLineNumbers- Option hinzufügen, wie oben erwähnt. Die Option mediaquery kann mit FireLESS verwendet werden (Sie zeigt den ursprünglichen WENIGER Dateinamen und die Zeilennummer der WENIGER generierten CSS-Stile an.)

Optionen

Vor dem Laden der Skriptdatei less.js müssen Optionen in einem globalen Objekt less festgelegt werden.

<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- Es ist ein boolescher Typ. Die importierten Dateien werden angefordert, ob mit der Option async oder nicht. Standardmäßig ist es falsch.

• dumpLineNumbers- Es ist ein String-Typ. In der Ausgabe-CSS-Datei werden die Quellzeileninformationen hinzugefügt, wenn dumpLineNumbers festgelegt wird. Es hilft beim Debuggen der Regel, aus der es stammt.

• env- Es ist ein String-Typ. Die Umgebung kann in der Entwicklung oder Produktion ausgeführt werden. Die Entwicklung wird automatisch festgelegt, wenn die Dokument-URL mit beginntfile:// oder es ist in Ihrem lokalen Computer vorhanden.

• errorReporting - Wenn die Kompilierung fehlschlägt, kann die Fehlerberichterstattungsmethode festgelegt werden.

• fileAsync- Es ist ein boolescher Typ. Wenn eine Seite mit einem Dateiprotokoll vorhanden ist, kann sie anfordern, ob asynchron importiert werden soll oder nicht.

• functions - Es ist ein Objekttyp.

• logLevel- Es ist ein Nummerntyp. Es zeigt die Protokollierungsstufe in der Javascript-Konsole an.

  • 2: Informationen und Fehler

  • 1: Fehler

  • 0: Nichts

• poll- Im Überwachungsmodus wird die Zeit zwischen den Abfragen in Millisekunden angezeigt. Es ist ein ganzzahliger Typ. Standardmäßig ist 1000 eingestellt.

• relativeUrls- Die URLs werden relativ angepasst. Standardmäßig ist diese Option auf false festgelegt. Dies bedeutet, dass die URLs bereits relativ zur eintragslosen Datei sind. Es ist ein boolescher Typ.

• globalVars- Fügt die Liste der globalen Variablen in den Code ein. Die Zeichenfolgentypvariable sollte in Anführungszeichen gesetzt werden

• modifyVars- Es ist anders als die globale Variablenoption. Die Deklaration wird am Ende Ihrer weniger Datei verschoben.

• rootpath - Es legt Pfade am Anfang jeder URL-Ressource fest.

• useFileCache- Verwendet den Cache pro Sitzungsdatei. Der Cache in weniger Dateien wird verwendet, um die modifyVars aufzurufen, bei denen alle weniger Dateien nicht erneut abgerufen werden.

WENIGER ist browserübergreifend. Es unterstützt moderne Browser wie Google Chrome, Mozilla Firefox, Safari und Internet Explorer und ermöglicht die Wiederverwendung von CSS-Elementen und das Schreiben von WENIGER Code mit derselben Semantik. Sie müssen vorsichtig mit den Auswirkungen auf die Leistung sein, wenn Sie WENIGER auf der Clientseite verwenden und JavaScript anzeigen, um kosmetische Probleme wie z

• Rechtschreibfehler,
• Farbänderungen,
• Texture
• Look
• Links usw.

Kompilieren Sie die WENIGER Dateien auf der Serverseite, um das Leistungsniveau der Website zu verbessern.

PhantomJS implementiert die Funktion Function.prototype.bind nicht, daher müssen Sie die es5 shim JavaScript-Engine verwenden, um unter PhantomJS ausgeführt zu werden. Benutzer können Anpassungen mit Variablen vornehmen, um das Thema zu beeinflussen und sie in Echtzeit anzuzeigen, indem sie die clientseitige WENIGER in der Produktion verwenden.

Wenn Sie LESS in älteren Browsern ausführen möchten, verwenden Sie die JavaScript-Engine es-5 shim , die von LESS unterstützte JavaScript-Funktionen hinzufügt. Sie können Attribute für das Skript oder Link-Tags verwenden, indem Sie JSON.parse verwenden, das vom Browser unterstützt werden muss.

In diesem Kapitel erfahren Sie, wie ein Plugin hochgeladen werden kann, um die Funktionalität der Site zu erweitern. Plugins können verwendet werden, um Ihre Arbeit zu erleichtern.

Befehlszeile

Um das Plugin über die Befehlszeile zu installieren, müssen Sie zuerst das lessc-Plugin installieren. Das Plugin kann zu Beginn mit Less-Plugin installiert werden . Die folgende Befehlszeile hilft Ihnen bei der Installation des Clean-CSS-Plugins:

npm install less-plugin-clean-css

Sie können das installierte Plugin direkt mit dem folgenden Befehl verwenden:

lessc --plugin = path_to_plugin = options

Verwenden eines Plugin-in-Codes

In Node ist das Plugin erforderlich und wird in einem Array als Options-Plugin an die weniger übergeben.

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

Im Browser

Vor dem Skript less.js sollte der Autor des Plugins die Javascript-Datei in die Seite aufnehmen.

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

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

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

Liste der weniger Plugins

In der folgenden Tabelle sind die in WENIGER verfügbaren Plugins aufgeführt.

Postprozessor- / Feature-Plugins

Framework- / Bibliotheksimporteure

Funktionsbibliotheken

Für Plugin-Autoren

WENIGER erlauben einem Autor, mit weniger zu kombinieren.

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

• pluginManager Bietet einen Inhaber, der Dateimanager, Postprozessoren oder Besucher hinzufügen kann.

• setOptions Funktion übergibt die Zeichenfolge.

• printUsage Funktion wird verwendet, um die Optionen zu erklären.

Der Hauptpunkt der programmatischen Verwendung im WENIGER ist die Funktion weniger rendern. Diese Funktion verwendet das folgende Format in WENIGER -

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

Die Funktion kann auch folgendermaßen geschrieben werden:

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

Die Optionen sind ein optionales Argument, das a zurückgibtpromise wenn Sie den Rückruf nicht angeben und a zurückgeben promisewenn Sie den Rückruf angeben. Sie können die Datei anzeigen, indem Sie sie in eine Zeichenfolge einlesen und die Dateinamenfelder der Hauptdatei festlegen.

Mit der Option sourceMap können Sie Sourcemap-Optionen wie sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles und sourceMapFileInline festlegen . Der Punkt, der hier berücksichtigt werden muss, ist, dass die sourceMap- Option für less.js nicht verfügbar ist.

Sie können auf das Protokoll zugreifen, indem Sie einen Listener hinzufügen, wie im folgenden Format gezeigt.

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

Die oben definierten Funktionen sind optional. Wenn ein Fehler angezeigt wird, wird der Fehler an weitergeleitetcallback oder promisein der less.render vorhanden .

In diesem Kapitel werden wir die Bedeutung von Online-Compilern in LESS verstehen. Online-Compiler werden verwendet, um den weniger Code in CSS-Code zu kompilieren. Online-Compiler-Tools helfen leicht beim Generieren des CSS-Codes. Im Folgenden sind die online verfügbaren weniger Compiler aufgeführt:

• winless.org/online-less-compiler

• lesstester.com

• dopefly.com/less-converte

• lessphp.gpeasy.com/demo

• leafo.net/lessphp/editor

• estFiddle

Online-Web-IDEs / Spielplätze mit weniger Unterstützung

Im Folgenden finden Sie die verfügbaren Online-Web-IDEs mit weniger Unterstützung.

In diesem Kapitel werden wir die GUIs für WENIGER verstehen . Sie können verschiedene WENIGER Tools für Ihre Plattform verwenden. Für die Verwendung der Befehlszeile und Tools klicken Sie auf diesen Link .

In der folgenden Tabelle sind die GUI-Compiler aufgeführt, die plattformübergreifend unterstützen.

In der folgenden Tabelle sind die GUI-Compiler aufgeführt, die die Windows-Plattform unterstützen.

In der folgenden Tabelle sind die GUI-Compiler aufgeführt, die die OS X-Plattform unterstützen.

In der folgenden Tabelle sind die GUI-Compiler aufgeführt, die die OS X-Plattform unterstützen.

In diesem Kapitel werden wir die Bedeutung von Editoren und Plugins in LESS verstehen . Ein Editor ist ein System oder Programm, mit dem ein Benutzer Text bearbeiten kann. Das Plugin ist eine Software, mit der die Funktionalität der Website erweitert wird.

Lassen Sie uns nun Editoren und IDEs für WENIGER diskutieren.

Erhabener Text 2 & 3

Der erhabene Text bietet verschiedene Optionen für WENIGER, wie in der folgenden Tabelle aufgeführt -

Finsternis

Eclipse hat zwei Plugins für WENIGER, wie in der folgenden Tabelle aufgeführt -

Visual Studio

Visual Studio bietet die folgenden verschiedenen Optionen für WENIGER:

Traumweber

Die folgenden Punkte müssen bei der Arbeit mit Dreamweaver berücksichtigt werden .

• Es ist eine Adobe-Anwendung, die von Webdesignern und Entwicklern zum Erstellen von Anwendungen und Websites verwendet wird.

• Es kann auf mehreren Plattformen arbeiten, einschließlich Browsern, Geräten und Tablets.

• Webdesigner verwenden Dreamweaver zum Erstellen von Website-Prototypen.

• Der DMXzone Less CSS Compiler macht alle WENIGER CSS-Funktionen direkt in Dreamweaver.

Notepad ++ 6.x.

Die folgenden Punkte müssen bei der Arbeit an Notepad ++ berücksichtigt werden .

• Notepad ++ ist ein Freitext- und Quellcode-Editor, der das Bearbeiten von Registerkarten unterstützt, dh das Arbeiten mit mehreren geöffneten Dateien in einem einzigen Fenster.

• WENIGER für Notepad ++ ist eine XML-Datei, die Syntaxhervorhebung oder -färbung für .less-Dateien bietet. Um weitere Informationen zu erhalten, klicken Sie auf diesen Link .

• Um Notepad ++ zu installieren, klicken Sie auf diesen Link .

Node.js Compiler

Im Folgenden sind die für LESS verwendeten Node.js-Compiler aufgeführt.

grunzfrei

Grunt ist ein Node Task Runner. Es erstellt Ihre Stylesheets jedes Mal, wenn Sie Änderungen an Ihren WENIGER-Dateien vornehmen.

ohne Montage

assemble-less ist ein leistungsstarkes Grunz-Plugin zum Kompilieren von WENIGER Dateien in CSS. Bei weniger Aufgaben werden JSON- und Lo-Dash-Vorlagen (Unterstriche) zum Definieren der WENIGER Bundles, UI-Komponenten, komprimierten Stylesheets oder Designs abgerufen.

schlucklos

Es ist WENIGER Plugin für Gulp. gulp-minify-css wird verwendet, um Ihr CSS zu minimieren. gulp-sourcemaps wird verwendet, um die Sourcemaps-Bibliothek zu generieren.

Aussparung

Es ist ein Open-Source-Tool, das auf WENIGER basiert und bei der Optimierung Ihres CSS-Codes hilft. Es hält den CSS-Code fehlerfrei, sauber und verwaltbar.

autoless

Es ist ein .less File Watcher. Es enthält Abhängigkeitsverfolgung und plattformübergreifende Benachrichtigung.

Verbinden Sie Middleware für Less.js.

Es wird verwendet, um die Verarbeitung für das Verbindungs-JS-Framework von WENIGER Dateien zu ermöglichen. Es kompiliert die Quelldatei auf Anfrage und speichert die kompilierten Daten für die nächste Anfrage zwischen.

Andere Technologien

Im Folgenden finden Sie einige andere Technologien, mit denen Sie einen WENIGER Code kompilieren können.

Wro4j Runner CLI

Sie können die Datei wro4j-running.jar herunterladen und Ihren WENIGER Code in CSS mit dem folgenden Befehl kompilieren:

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

Sie können den folgenden Link besuchen, um mehr über die Wro4j Runner CLI zu erfahren

CSS :: LESSp

Dieses Modul wird verwendet, um die WENIGER-Datei zu analysieren und in eine CSS-Datei zu kompilieren. Es folgt der Befehl zum Kompilieren -

lessp.pl styles.less > styles.css

Sie können den folgenden Link besuchen, um mehr über CSS :: LESSp zu erfahren

Windows Script Host

Es folgt der Befehlszeilen-Compiler, der unter Windows ausgeführt wird.

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

OR

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

Sie können den folgenden Link besuchen, um mehr über Less.js für Windows zu erfahren

punktlos

Das Folgende ist ein Befehlszeilen-Compiler zum Ausführen von dotless für Windows.

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

Sie können den folgenden Link besuchen, um mehr über dotless zu erfahren

UI / Theme Frameworks und Komponenten

WENIGER unterstützt einige der in der folgenden Tabelle aufgeführten UI / Theme-Frameworks -

Netzsysteme

LESS unterstützt Grid-System-Frameworks, wie in der folgenden Tabelle aufgeführt -

Mixin-Bibliotheken

LESS bietet Mixin-Bibliotheken wie in der folgenden Tabelle aufgeführt -