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.

Sr.Nr. Verwendung und Beschreibung von Variablen
1 Überblick

Die mehrfache Wiederholung des gleichen Wertes kann durch die Verwendung von Variablen vermieden werden .

2 Variable Interpolation

Die Variablen können auch an anderen Orten wie verwendet werden Selektornamen , Eigenschaftsnamen , URL s und @import Aussagen.

3 Variablennamen

Wir können Variablen mit einem Variablennamen definieren, der aus einem Wert besteht.

4 Faules Laden

Beim verzögerten Laden können Variablen verwendet werden, auch wenn dies nicht der Fall ist.

5 Standardvariablen

Die Standardvariable kann eine Variable nur festlegen, wenn sie noch nicht festgelegt ist. Diese Funktion ist nicht erforderlich, da Variablen leicht überschrieben werden können, indem sie anschließend definiert werden.

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.

Sr.Nr. Typen & Beschreibung
1 Erweitern Sie Attached to Selector

Extend ist mit einem Selektor verbunden, der einer Pseudoklasse mit Selektor als Parameter ähnelt.

2 Innerhalb des Regelsatzes erweitern

Das &:extend(selector) Die Syntax kann in den Regelsatz eingefügt werden.

3 Verschachtelte Selektoren erweitern

Verschachtelte Selektoren werden mit dem Erweiterungsselektor abgeglichen .

4 Genaue Übereinstimmung mit Extend

Standardmäßig, extend sucht nach der genauen Übereinstimmung zwischen den Selektoren.

5 n-ter Ausdruck

Die Form des n-ten Ausdrucks ist insofern wichtig, als sie den Selektor als unterschiedlich behandelt.

6 Erweitern Sie "alle"

Wenn das Schlüsselwort alle endlich in der identifiziert wirdextend Argument dann WENIGER entspricht diesem Selektor als Teil eines anderen Selektors.

7 Selektorinterpolation mit Erweitern

Das extend kann an den interpolierten Selektor angeschlossen werden.

8 Scoping / Erweitern in @media

Extend entspricht nur dem Selektor, der in derselben Mediendeklaration vorhanden ist.

9 Duplizierungserkennung

Es kann keine Duplizierung von Selektoren erkennen.

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

Sr.Nr. Typen & Beschreibung
1 Klassischer Anwendungsfall

Der klassische Anwendungsfall wird verwendet, um das Hinzufügen der Basisklasse in WENIGER zu vermeiden.

2 CSS-Größe reduzieren

Mit Erweitern wird der Selektor bis zu den Eigenschaften verschoben, die Sie verwenden möchten. Dies hilft bei der Reduzierung des CSS-generierten Codes.

3 Kombinieren von Stilen / Ein fortgeschritteneres Mixin

Mit Extend können wir die gleichen Stile eines bestimmten Selektors in einem anderen Selektor kombinieren.

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.

Sr.Nr. Mixins Verwendung & Beschreibung
1 Mixin nicht ausgeben

Mixins können durch einfaches Platzieren der Klammern in der Ausgabe verschwinden.

2 Selektoren in Mixins

Die Mixins können nicht nur Eigenschaften enthalten, sondern auch Selektoren.

3 Namespaces

Namespaces werden verwendet, um die Mixins unter einem gemeinsamen Namen zu gruppieren.

4 Bewachte Namespaces

Wenn Guard auf den Namespace angewendet wird, werden von ihm definierte Mixins nur verwendet, wenn die Guard-Bedingung true zurückgibt.

5 Das! Wichtige Schlüsselwort

Das Schlüsselwort ! Important wird verwendet, um die bestimmte Eigenschaft zu überschreiben.

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.

Sr.Nr. Typen & Beschreibung
1 Mixins mit mehreren Parametern

Parameter können durch Kommas oder Semikolon getrennt werden.

2 Benannte Parameter

Mixins liefern Parameterwerte anstelle von Positionen unter Verwendung ihrer Namen.

3 @arguments Variable

Wenn ein Mixin aufgerufen wird, enthalten die @arguments alle übergebenen Argumente.

4 Erweiterte Argumente und die Variable @rest

Mixin verwendet eine variable Anzahl von Argumenten .....

5 Mustervergleich

Ändern Sie das Verhalten des Mixins, indem Sie ihm Parameter übergeben.

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.

Sr.No. Mixins usage & Description
1 Mixin scope

Mixins consist of variables; these can be used in caller's scope and are visible.

2 Mixin and return values

Mixins are similar to functions and the variables that are defined in a mixin will behave as the return values.

3 Mixin inside another mixin

Whenever a mixin is defined inside another mixin, it can be used as return value too.

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 −

Sr.No. Types & Description
1 Definition and Caller Scope Visibility

Variables and mixins are defined inside the detached ruleset.

2 Referencing Won't Modify Detached Ruleset Scope

Just giving the references, the ruleset does not access to any new scopes.

3 Unlocking Will Modify Detached Ruleset Scope

The detached ruleset can access to scope by being imported into it.

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.

Sr.No. Import options & Description
1 reference

It uses a LESS file only as reference and will not output it.

2 inline

It enables you to copy your CSS into the output without being processed.

3 less

It will treat the imported file as the regular LESS file, despite whatever may be the file extension.

4 css

It will treat the imported file as the regular CSS file, despite whatever may be the file extension.

5 once

It will import the file only one time.

6 multiple

It will import the file multiple times.

7 optional

It continues compiling even though the file to import is not found.

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.

Sr.No. Types & Description
1 Guard Comparison Operators

You can use the comparison operator (=) to compare numbers, strings, identifiers, etc.

2 Guard Logical Operators

You can use the and keyword to work around logical operators with guards.

3 Type Checking Functions

It contains the built-in functions to determine the value types for matching mixins.

4 Conditional Mixins

LESS uses the default function to match mixin with other mixing matches.

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.

Sr.Nr. Typen & Beschreibung
1 Komma

Am Ende wird der Eigenschaftswert hinzugefügt.

2 Raum

Es fügt dem Leerzeichen einen Eigenschaftswert hinzu.

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 -

Sr.Nr. Typen & Beschreibung
1 Multiple &

Das & repräsentiert den nächsten Selektor und auch alle übergeordneten Selektoren.

2 Auswahlreihenfolge ändern

Das Voranstellen eines Selektors an die geerbten (übergeordneten) Selektoren ist nützlich, wenn die Selektorreihenfolge geändert wird.

3 Combinatorial Explosion

Das & kann auch alle möglichen Permutationen von Selektoren in einer durch Kommas getrennten Liste erzeugen.

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.

Sr.Nr. Funktionen & Beschreibung
1 Farbe

Es ist eine Zeichenfolge, die Farben darstellt.

2 Bildgröße

Es wird verwendet, um die Dimension des Bildes aus der Datei zu untersuchen.

3 Bild breite

Es untersucht die Breite des Bildes aus der Datei.

4 Bildhöhe

Es untersucht die Höhe des Bildes aus der Datei.

5 Konvertieren

Eine Zahl wird von einer Einheit in eine andere umgewandelt.

6 Daten - uri

Data uri ist ein URI-Schema (Uniform Resource Identifier), mit dem eine Ressource auf Webseiten inline abgerufen wird.

7 Standard

Die Standardfunktion gibt nur dann true zurück, wenn sie innerhalb der Schutzbedingung verfügbar ist und mit keinem anderen Mixin übereinstimmt.

8 Einheit

Die Standardfunktion gibt nur dann true zurück, wenn sie innerhalb der Schutzbedingung verfügbar ist und mit keinem anderen Mixin übereinstimmt

9 get - unit

Die Funktion get - unit gibt ihre Einheit zurück, in der das Argument mit Zahl und Einheiten vorhanden ist.

10 svg - gradient

svg-gradient ist ein Übergang von einer Farbe zur anderen. Es kann dem gleichen Element viele Farben hinzufügen.

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.

Sr.Nr. Typen & Beschreibung Beispiel
1

Escape

Es codiert eine Zeichenfolge oder Information mithilfe der URL-Codierung für Sonderzeichen. Sie konnten einige Zeichen wie nicht codieren, , / , ? , @ , & , + , ~ , ! , $ , ' und einige Zeichen, die Sie codieren können, wie z \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ und =.

escape("Hello!! welcome to Tutorialspoint!")

Es gibt einen Escape-String als - aus

Hello%21%21%20welcome%20to%20Tutorialspoint%21
2

e

Es ist eine Zeichenfolgenfunktion, die Zeichenfolge als Parameter verwendet und die Informationen ohne Anführungszeichen zurückgibt. Es ist ein CSS-Escapezeichen, das ~ "einige Inhalte" maskierte Werte und Zahlen als Parameter verwendet.

filter: e("Hello!! welcome to Tutorialspoint!");

Es gibt einen Escape-String als - aus

filter: Hello!! welcome to Tutorialspoint!;
3

% format

Diese Funktion formatiert eine Zeichenfolge. Es kann mit folgendem Format geschrieben werden:

%(string, arguments ...)
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

Es gibt die formatierte Zeichenfolge als - aus

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

Es wird verwendet, um den Text innerhalb einer Zeichenfolge zu ersetzen. Es werden einige Parameter verwendet -

  • string - Es durchsucht die Zeichenfolge und ersetzt sie.

  • pattern - Es durchsucht das Muster des regulären Ausdrucks.

  • replacement - Es ersetzt die Zeichenfolge, die dem Muster entspricht.

  • flags - Dies sind optionale Flags für reguläre Ausdrücke.

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

Es ersetzt die Zeichenfolge als -

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

Sr.Nr. Bedienungsanleitung
1 Länge

Es wird eine durch Kommas oder Leerzeichen getrennte Liste von Werten als Parameter verwendet.

2 Extrakt

Der Wert wird an einer bestimmten Position in einer Liste zurückgegeben.

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 -

Sr.Nr. Bedienungsanleitung Beispiel
1

ceil

Es rundet die Zahl auf die nächsthöhere Ganzzahl auf.

ceil(0.7)

es rundet die Zahl auf -

1
2

floor

Es rundet die Zahl auf die nächstniedrigere Ganzzahl ab.

floor(3.3)

es rundet die Zahl auf -

3
3

percentage

Es wandelt die Gleitkommazahl in eine Prozentzeichenfolge um.

percentage(0.2)

Es konvertiert die Zahl in Prozentzeichenfolge als -

20%
4

round

Es rundet eine Gleitkommazahl.

round(3.77)

es wandelt die Zahl in den Rundungswert um als -

4
5

sqrt

Es gibt die Quadratwurzel einer Zahl zurück.

sqrt(25)

es definiert die Quadratwurzel einer Zahl als -

5
6

abs

Es liefert den absoluten Wert einer Zahl.

abs(30ft)

es zeigt den absoluten Wert als - an

30ft
7

sin

Es gibt Bogenmaß auf Zahlen zurück.

sin(2)

es berechnet den Sinuswert als -

0.90929742682
8

asin

Es gibt den Arkussinus (Inverse des Sinus) einer Zahl an, die einen Wert zwischen -pi / 2 und pi / 2 zurückgibt.

asin(1)

es berechnet den asin-Wert als -

1.5707963267948966
9

cos

Es gibt den Kosinus des angegebenen Werts zurück und bestimmt das Bogenmaß für Zahlen ohne Einheiten.

cos(2)

es berechnet den cos-Wert als -

-0.4161468365471424
10

acos

Es gibt Arccosin (Inverse von Cosinus) einer Zahl an, die einen Wert zwischen 0 und pi zurückgibt.

acos(1)

es berechnet den acos-Wert als -

0
11

tan

Es gibt den Tangens der Zahl an.

tan(60)

es berechnet den Bräunungswert als -

0.320040389379563
12

atan

Es gibt den Arkustangens (Umkehrung der Tangente) einer bestimmten Zahl an.

atan(1)

Es zeigt einen Wert als - an

0.7853981633974483
13

pi

Es gibt den pi-Wert zurück.

pi()

es bestimmt den pi-Wert als -

3.141592653589793
14

pow

Es gibt den Wert des ersten Arguments an, der zur Potenz des zweiten Arguments erhoben wird.

pow(3,3)

es gibt den Leistungswert an als -

27
15

mod

Es gibt den Modul des ersten Arguments in Bezug auf das zweite Argument zurück. Es behandelt auch negative und Gleitkommazahlen.

mod(7,3)

es gibt den Modulwert zurück als -

1
16

min

Es gibt den kleinsten Wert eines oder mehrerer Argumente an.

min(70,30,45,20)

es gibt den Mindestwert zurück als -

20
17

max

Es gibt den höchsten Wert eines oder mehrerer Argumente an.

max(70,30,45,20)

es gibt den Maximalwert zurück als -

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.

Sr.Nr. Typ Funktionen & Beschreibung Beispiel
1

isnumber

Es nimmt einen Wert als Parameter und gibt true zurück , wenn es sich um eine Zahl oder andernfalls um false handelt .

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
2

isstring

Es nimmt einen Wert als Parameter und gibt true zurück , wenn es sich um eine Zeichenfolge handelt oder andernfalls 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
3

iscolor

Es nimmt einen Wert als Parameter und gibt true zurück , wenn value eine Farbe ist, oder false, wenn dies nicht der Fall ist .

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
4

iskeyword

Es nimmt einen Wert als Parameter und gibt true zurück , wenn value ein Schlüsselwort ist, oder false, wenn dies nicht der Fall ist .

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
5

isurl

Es nimmt einen Wert als Parameter und gibt true zurück , wenn value eine URL ist, oder false, wenn dies nicht der Fall ist .

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
6

ispixel

Es nimmt einen Wert als Parameter und gibt true zurück , wenn value eine Zahl in Pixel ist oder andernfalls 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
7

isem

Es nimmt einen Wert als Parameter und gibt true zurück , wenn value ein em-Wert ist, oder false, wenn dies nicht der Fall ist .

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
8

ispercentage

Es nimmt einen Wert als Parameter und gibt true zurück , wenn der Wert in Prozent angegeben ist, oder false , wenn der Wert nicht in Prozent angegeben ist.

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
9

isunit

Es gibt true zurück , wenn ein Wert eine Zahl in angegebenen Einheiten ist, die als Parameter angegeben sind, oder false, wenn value keine Zahl in angegebenen Einheiten ist.

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
10

isruleset

Es nimmt einen Wert als Parameter und gibt true zurück , wenn value ein Regelsatz ist oder 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 -

Sr.Nr. Bedienungsanleitung Beispiel
1

rgb

Es erzeugt Farbe aus roten, grünen und blauen Werten. Es hat folgende Parameter -

  • red - Es enthält eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0 und 100%.

  • green - Es enthält eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0 und 100%.

  • blue - Es enthält eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0 und 100%.

rgb(220,20,60)

es konvertiert Farbe mit RGB-Werten als -

#dc143c
2

rgba

Es bestimmt die Farbe aus den Werten Rot, Grün, Blau und Alpha. Es hat die folgenden Parameter -

  • red - Es enthält eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0 und 100%.

  • green - Es enthält eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0 und 100%.

  • blue - Es enthält eine Ganzzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0 und 100%.

  • alpha - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

rgba(220,20,60, 0.5)

es konvertiert ein Farbobjekt mit rgba-Werten als -

rgba(220, 20, 60, 0.5)
3

argb

Es definiert die hexadezimale Darstellung der Farbe in #AARRGGBBFormat. Es verwendet den folgenden Parameter -

  • color - Es gibt ein Farbobjekt an.

argb(rgba(176,23,31,0.5))

es gibt die argb Farbe als - zurück

#80b0171f
4

hsl

Es erzeugt die Farbe aus Farbton-, Sättigungs- und Helligkeitswerten. Es hat folgende Parameter -

  • hue - Es enthält eine Ganzzahl zwischen 0 und 360, die Grad darstellt.

  • saturation - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

  • lightness - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

hsl(120,100%, 50%)

Es gibt das Farbobjekt mit HSL-Werten als - zurück

#00ff00
5

hsla

Es erzeugt die Farbe aus Farbton-, Sättigungs-, Helligkeits- und Alpha-Werten. Es hat die folgenden Parameter -

  • hue - Es enthält eine Ganzzahl zwischen 0 und 360, die Grad darstellt.

  • saturation - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

  • lightness - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

  • alpha - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

hsla(0,100%,50%,0.5)

Es gibt das Farbobjekt mit HSLA-Werten als - an

rgba(255, 0, 0, 0.5);
6

hsv

Es erzeugt die Farbe aus Farbton-, Sättigungs- und Wertwerten. Es enthält folgende Parameter:

  • hue - Es enthält eine Ganzzahl zwischen 0 und 360, die Grad darstellt.

  • saturation - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

  • value - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

hsv(80,90%,70%)

es konvertiert Farbobjekte mit hsv-Werten als -

#7db312
7

hsva

Es erzeugt die Farbe aus Farbton-, Sättigungs-, Wert- und Alpha-Werten. Es verwendet die folgenden Parameter -

  • hue - Es enthält eine Ganzzahl zwischen 0 und 360, die Grad darstellt.

  • saturation - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

  • value - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

  • alpha - Es enthält eine Zahl zwischen 0 und 1 oder einen Prozentsatz zwischen 0 und 100%.

hsva(80,90%,70%,0.6)

Es gibt ein Farbobjekt mit hsva-Werten als - an

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 -

Sr.Nr. Bedienungsanleitung Beispiel
1

hue

Im HSL-Farbraum wird der Farbtonkanal aus dem Farbobjekt extrahiert.

background: hue(hsl(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 75;
2

saturation

Im HSL-Farbraum wird der Sättigungskanal aus dem Farbobjekt extrahiert.

background: saturation(hsl(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 90%;
3

lightness

Im HSL-Farbraum wird der Helligkeitskanal aus dem Farbobjekt extrahiert.

background: lightness(hsl(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 30%;
4

hsvhue

Im HSV-Farbraum wird der Farbtonkanal aus dem Farbobjekt extrahiert.

background: hsvhue(hsv(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 75;
5

hsvsaturation

Im HSL-Farbraum wird der Sättigungskanal aus dem Farbobjekt extrahiert.

background: hsvsaturation(hsv(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 90%;
6

hsvvalue

Im HSL-Farbraum wird der Wertekanal aus dem Farbobjekt extrahiert.

background: hsvvalue(hsv(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 30%;
7

red

Der rote Kanal wird aus dem Farbobjekt extrahiert.

background: red(rgb(5, 15, 25));

Es wird im CSS wie unten gezeigt kompiliert -

background: 5;
8

green

Der grüne Kanal wird aus dem Farbobjekt extrahiert.

background: green(rgb(5, 15, 25));

Es wird im CSS wie unten gezeigt kompiliert -

background: 15;
9

blue

Der blaue Kanal wird aus dem Farbobjekt extrahiert.

background: blue(rgb(5, 15, 25));

Es wird im CSS wie unten gezeigt kompiliert -

background: 25;
10

alpha

Der Alphakanal wird aus dem Farbobjekt extrahiert.

background: alpha(rgba(5, 15, 25, 1.5));

Es wird im CSS wie unten gezeigt kompiliert -

background: 2;
11

luma

Der Luma-Wert wird aus einem Farbobjekt berechnet.

background: luma(rgb(50, 250, 150));

Es wird im CSS wie unten gezeigt kompiliert -

background: 71.2513323%;
12

luminance

Der Luma-Wert wird ohne Gammakorrektur berechnet.

background: luminance(rgb(50, 250, 150));

Es wird im CSS wie unten gezeigt kompiliert -

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 -

Sr.Nr. Richtlinien & Beschreibung
1 sättigen

Es variiert die Intensität oder Sättigung einer Farbe im Element.

2 entsättigen

Es verringert die Intensität oder Sättigung einer Farbe im Element.

3 erleichtern

Es erhöht die Helligkeit einer Farbe im Element.

4 verdunkeln

Es variiert die Intensität oder Sättigung einer Farbe im Element.

5 einblenden

Es erhöht die Deckkraft für ausgewählte Elemente.

6 ausblenden

Es verringert die Deckkraft für ausgewählte Elemente.

7 verblassen

Hiermit wird die Transparenz einer Farbe für ausgewählte Elemente festgelegt.

8 rotieren

Es wird verwendet, um den Winkel einer Farbe für ausgewählte Elemente zu drehen.

9 mischen

Es mischt die beiden Farben zusammen mit der Deckkraft.

10 Farbton

Es mischt die Farbe mit Weiß, wenn Sie den Anteil der Farbe verringern.

11 Schatten

Es mischt die Farbe mit Schwarz, wenn Sie den Anteil der Farbe verringern.

12 Graustufen

Es verwirft die Sättigung einer Farbe in den ausgewählten Elementen.

13 Kontrast

Hiermit wird der Kontrast für die Farben im Element festgelegt.

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.

Sr.Nr. Funktionen & Beschreibung
1 multiplizieren

Es multipliziert zwei Farben und gibt eine resultierende Farbe zurück.

2 Bildschirm

Es nimmt zwei Farben an und gibt eine hellere Farbe zurück. Es funktioniert entgegengesetzt zur Multiplikationsfunktion .

3 Overlay

Es erzeugt ein Ergebnis, indem der Effekt von Multiplizieren und Bildschirm kombiniert wird .

4 Sanftes Licht

Es funktioniert ähnlich wie Overlay , verwendet jedoch nur einen Teil der Farbe, wodurch die andere Farbe weich hervorgehoben wird.

5 hartes Licht

Es funktioniert ähnlich wie Overlay, aber die Rolle der Farben ist vertauscht.

6 Unterschied

Es subtrahiert die zweite Eingabefarbe von der ersten Eingabefarbe.

7 Ausschluss

Es funktioniert ähnlich wie die Differenzfunktion , jedoch mit geringerem Kontrast.

8 durchschnittlich

Es berechnet den Durchschnitt von zwei Eingabefarben pro Kanal (RGB).

9 Negation

Es funktioniert entgegengesetzt zur Differenzfunktion , die die erste Farbe von der zweiten Farbe subtrahiert.

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.

Sr.Nr. Optionen & Beschreibung Befehl
1

Help

Die Hilfemeldung wird mit den verfügbaren Optionen angezeigt.

lessc -help
lessc -h
2

Include Paths

Es enthält die verfügbaren Pfade zur Bibliothek. Auf diese Pfade kann in den Less-Dateien einfach und relativ verwiesen werden. Die Pfade in Fenstern werden durch Doppelpunkt (:) oder Semikolon (;) getrennt.

lessc --include-path = PATH1;PATH2
3

Makefile

Es generiert eine Makefile-Importabhängigkeitsliste für stdout als Ausgabe.

lessc -M
lessc --depends
4

No Color

Es deaktiviert die kolorierte Ausgabe.

lessc --no-color
5

No IE Compatibility

Es deaktiviert die IE-Kompatibilitätsprüfungen.

lessc --no-ie-compat
6

Disable Javascript

Es deaktiviert das Javascript in weniger Dateien.

lessc --no-js
7

Lint

Es überprüft die Syntax und meldet Fehler ohne Ausgabe.

lessc --lint
lessc -l
8

Silent

Die Anzeige von Fehlermeldungen wird gewaltsam gestoppt.

lessc --silent
lessc -s
9

Strict Imports

Es erzwingt die Auswertung von Importen.

lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

Es wird von den unsicheren HTTPS-Hosts importiert.

lessc --insecure
11

Version

Es zeigt die Versionsnummer an und wird beendet.

lessc -version
lessc -v
12

Compress

Es hilft beim Entfernen der Leerzeichen und beim Komprimieren der Ausgabe.

lessc -x
lessc --compress
13

Source Map Output Filename

Es generiert die Quellkarte in weniger. Wenn die Option Quellkarte ohne Dateinamen definiert ist, wird die Erweiterungszuordnung mit dem Dateinamen Weniger als Quelle verwendet.

lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

Rootpath ist angegeben und sollte zu Less-Dateipfaden in der Quellkarte und auch zu der Map-Datei hinzugefügt werden, die in Ihrer Ausgabe-CSS angegeben ist.

lessc --source-map-rootpath = dev-files/
15

Source Map Basepath

Es wird ein Pfad angegeben, der aus den Ausgabepfaden entfernt werden muss. Basepath ist das Gegenteil der Rootpath-Option.

lessc --source-map-basepath = less-files/
16

Source Map Less Inline

Alle Less-Dateien sollten in der Quellkarte enthalten sein.

lessc --source-map-less-inline
17

Source Map Map Inline

Es gibt an, dass in der Ausgabe-CSS die Map-Datei inline sein soll.

lessc --source-map-map-inline
18

Source Map URL

Eine URL darf die Punkte in der Kartendatei im CSS überschreiben.

lessc --source-map-url = ../my-map.json
19

Rootpath

Es legt Pfade für das Umschreiben von URLs in relativen Importen und URLs fest.

lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

In importierten Dateien wird die URL neu geschrieben, sodass die URL immer relativ zur Basisdatei ist.

lessc -ru
lessc --relative-urls
21

Strict Math

Es verarbeitet alle mathematischen Funktionen in Ihrem CSS. Standardmäßig ist es ausgeschaltet.

lessc -sm = on
lessc --strict-math = on
22

Strict Units

Es erlaubt gemischte Einheiten.

lessc -su = on
lessc --strict-units = on
23

Global Variable

Es wird eine Variable definiert, auf die die Datei verweisen kann.

lessc --global-var = "background = green"
24

Modify Variable

Dies unterscheidet sich von der Option für globale Variablen. Die Deklaration wird am Ende Ihrer weniger Datei verschoben.

lessc --modify-var = "background = green"
25

URL Arguments

Um zu jeder URL zu gelangen, darf ein Argument angegeben werden.

lessc --url-args = "arg736357"
26

Line Numbers

Inline-Quell-Mapping wird generiert.

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

Es lädt das Plugin.

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

Sr.Nr. Plugins & Beschreibung
1 Autoprefixer

Es wird verwendet, um CSS nach der Übersetzung von LESS Präfixe hinzuzufügen.

2 CSScomb

Dies hilft, die Wartung Ihres Stylesheets zu verbessern.

3 clean-css

Es minimiert die CSS-Ausgabe von LESS.

4 CSSWring

Es komprimiert oder minimiert die CSS-Ausgabe von LESS.

5 CSS-Flip

Es wird verwendet, um das CSS von links nach rechts (LTR) oder von rechts nach links (RTL) zu generieren.

6 Funktionen

Es schreibt die Funktion von WENIGER in das WENIGER selbst.

7 glob

Es wird verwendet, um mehrere Dateien zu importieren.

8 Gruppen-CSS-Medienabfragen

Es macht die Nachbearbeitung für weniger.

9 Inline-URLs

Konvertiert die URL automatisch in Daten-Uri.

10 npm-import

Es importiert aus dem npm-Paket für weniger.

11 Bitte

Es wird verwendet, um Less nachzubearbeiten.

12 rtl

WENIGER wird von ltr (von links nach rechts) zu rtl (von rechts nach links) umgekehrt.

Framework- / Bibliotheksimporteure

Sr.Nr. Importeure & Beschreibung
1 Bootstrap

Bootstrap WENIGER Code wird vor dem benutzerdefinierten WENIGER Code importiert.

2 Laube auflösen

WENIGER Dateien werden aus den Bower-Paketen importiert.

3 Kardinal CSS für less.js.

Vor dem benutzerdefinierten WENIGER Code wird der WENIGER Code für Cardinal importiert.

4 Flexbox Grid

Am häufigsten importierter Framework- oder Bibliotheksimporter.

5 Flexibles Rastersystem

Es importiert das Flexible Grid System.

6 Ionisch

Es importiert das ionische Gerüst.

7 Lesshat

Es importiert die Lesshat-Mixins.

8 Skelett

Es importiert den Code ohne Skelett.

Funktionsbibliotheken

Sr.Nr. Importeure & Beschreibung
1 erweiterte Farbfunktionen

Es wird verwendet, um kontrastreichere Farben zu finden.

2 Cubehelix

Bei Verwendung eines Gammakorrekturwerts von 1 kann die Cubehelix-Funktion eine Farbe zwischen den beiden Farben zurückgeben.

3 Listen

Hier wird die Bibliothek der Manipulationsfunktionen aufgelistet.

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.

Sr.Nr. Online Web IDEs & Beschreibung
1 CSSDeck Labs

Hier können Sie problemlos Testfälle mit HTML-, CSS- und JS-Code erstellen.

2

CodePen

Dies ist ein Spielplatz für das Frontend-Web.

3 Geigen-Salat

Hier können Sie einen vorhandenen Code in die Umgebung einfügen.

4 JS Bin

Dies hilft Javascript und CSS-Code.

5 jsFiddle

Dies ist ein Online-Web-Editor.

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.

Sr.Nr. Werkzeuge & Beschreibung
1 Crunch 2!

Es unterstützt plattformübergreifende Funktionen wie Windows, Mac und Linux . Es bietet dem Editor eine integrierte Kompilierung.

2

Mixture

Es ist ein Rapid Prototyping- und statisches Tool zur Site-Generierung, das von Designern und Entwicklern verwendet wird. Es ist schnell, effizient und funktioniert gut mit Ihrem Editor. Es vereint eine Sammlung großartiger Tools und Best Practices.

3 Einfach

Es ist ein minimalistischer WENIGER Compiler. Es bietet Drag & Drop- und Kompilierungsfunktionen. SimpLESS unterstützt prefixing Ihre CSS mithilfe von prefixr , die die einzigartige Eigenschaft von SimpLESS ist. Es ist auf Titanium-Plattform gebaut.

4 Koala

Es wird verwendet, um LESS, SASS und CoffeeScript zu kompilieren. Es bietet Funktionen wie Unterstützung für Kompilierungsfehlerbenachrichtigungen und Unterstützung für Kompilierungsoptionen.

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

Sr.Nr. Werkzeuge & Beschreibung
1 Prepros

Es ist ein Tool, das LESS, SASS, Compass, Stylus, Jade und viele mehr kompiliert.

2 WinLess

Ursprünglich war es ein Klon von LESS.app, es hat mehrere Einstellungen und verfolgt mehr Funktionen. Es unterstützt das Beginnen mit Befehlszeilenargumenten.

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

Sr.Nr. Werkzeuge & Beschreibung
1 CodeKit

t ist Nachfolger von LESS.app und unterstützt LESS unter vielen anderen Verarbeitungssprachen wie SASS, Jade, Markdown und mehr.

2 LiveReload

Es bearbeitet CSS und ändert Bilder sofort. SASS, LESS, CoffeeScript und andere funktionieren gut.

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

Sr.Nr. Werkzeuge & Beschreibung
1 Plessc

Es ist Gui Frontend für Lessc. Es verfügt über Funktionen wie Log Viewer, automatische Kompilierung, Öffnen der WENIGER-Datei mit dem ausgewählten Editor und Unterstützung für Quellkarten.

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.

Sr.Nr. Editoren und IDEs & Beschreibung
1 Crunch!

Es unterstützt plattformübergreifende Funktionen wie Windows, Mac und Linux . Es bietet dem Editor eine integrierte Kompilierung.

2 Mindscape Web Workbench

Es bietet die Bearbeitung von CoffeeScript, SASS, Compass und LESS und erleichtert die moderne Webentwicklung in Visual Studio.

3 NetBeans

Es ist eine Open-Source-Java-basierte IDE. Dies hilft bei der schnellen Entwicklung Ihrer Desktop-, Mobil- und Webanwendungen sowie von HTML5-Anwendungen, die HTML, JavaScript und CSS enthalten.

4 TextMate

Es ist ein grafischer Allzweck-Texteditor für Mac OS X. Er bietet deklarative Anpassungen, beschreibbare Makros, Snippets, Shell-Integration, Registerkarten für geöffnete Dokumente und ein erweiterbares Bundle-System.

5 Vim

Das vim-Bundle bietet Funktionen wie Einrücken, Hervorheben und automatische Vervollständigung für die dynamische Stylesheet-Sprache WENIGER.

6 Emacs

Es enthält ein Less-CSS-Modell, das einen Emacs-Modus für WENIGER CSS bietet (lesscss.org). Emacs unterstützt Compile-on-Save.

7 jetBrains WebStorm und PhpStorm

WebStrom ist eine leichte und leistungsstarke IDE. Es ist perfekt für die komplexe clientseitige und Serverentwicklung mit Node.js ausgestattet. PhpStorm ist eine PHP-IDE, die ein tiefgreifendes Codeverständnis unterstützt und erstklassige Codierungsunterstützung und Unterstützung für alle wichtigen Tools und Frameworks bietet.

8 Klammern

Es ist ein leichter, leistungsstarker und Open-Source-Code-Editor, der Webdesignern und Front-End-Entwicklern hilft.

9 CodeLobster

Es ist eine tragbare integrierte Entwicklungsumgebung (IDE), hauptsächlich für PHP. Es unterstützt auch die Entwicklung von HTML, CSS und JavaScript und Plugins sind für Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii und CakePHP verfügbar.

10 KineticWing IDE

Es ist eine schnelle, saubere, leichte und tragbare IDE. Es handelt sich um eine Entwicklungssuite in voller Größe, mit der Sie intelligent und schnell arbeiten können.

11 nodeMirror

Es ist eine Open Source und leicht anpassbare IDE. Es verwendet CodeMirror.net, pty.js und andere Bibliotheken.

12 HTML-Kit-Tools

Dies ist ein moderner Webeditor für HTML5, CSS3, JavaScript und mehr. Mit dieser Funktion können Sie Projekte mit einem modernen standardkonformen Editor bearbeiten, in der Vorschau anzeigen, validieren, veröffentlichen und verwalten.

Erhabener Text 2 & 3

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

Sr.Nr. Optionen & Beschreibung
1 Weniger erhaben

WENIGER Syntax für erhabenen Text bietet Syntaxhervorhebung für .less- Dateien zusammen mit Snippets.

2 Sublime-Less-to-CSS

Hervorragendes Plugin für Text 2 und 3 zum Kompilieren von .less- Dateien in CSS beim Speichern. Es benötigtlessc auf PATH installiert.

3 Weniger Build-Sublime

WENIGER Build-System für erhabenen Text 2 , das zwei Build-Systeme für WENIGER Dateien bereitstellt, sowohl minimiert als auch nicht minimiert.

4

SublimeOnSaveBuild

Es ist ein einfaches Plugin für erhabenen Text 2 , um einen Build auszulösen, wenn Sie auf Speichern klicken. Funktioniert gut mit Vorprozessoren wie LESS, Compass und anderen.

Finsternis

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

Sr.Nr. Plugins & Beschreibung
1 Eclipse Less Plugin

Durch die Erweiterung der Eclipse-IDE bietet dieses Plugin nützliche Funktionen zum Bearbeiten und Kompilieren von WENIGER Stylesheets.

2 Transpiler Plugin

Dieses Eclipse-Plugin transpiliert automatisch Ihre Dateien wie LESS, SASS, CoffeeScript usw.

Visual Studio

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

Sr.Nr. Optionen & Beschreibung
1 CSS ist weniger

Mit dieser Erweiterung werden WENIGER Dateien mit dem CSS-Sprachdienst geöffnet.

2 Web Essentials 2012

Mit dieser Erweiterung können Sie allgemeine Aufgaben viel einfacher ausführen und Visual Studio für Webentwickler nützliche Funktionen hinzufügen.

3 Web Essentials 2013

Es erweitert Visual Studio um viele neue Funktionen, die nicht für eine bestimmte Sprache oder einen bestimmten Editor spezifisch sind.

4 Web Tools 2013

Dies hilft Ihnen bei den Entwicklungsaufgaben, an denen ASP.NET beteiligt ist

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 -

Sr.Nr. Framework & Beschreibung
1 1pxdeep

Es ist ein flaches Bootstrap 3-Thema, das leistungsstarke Steuerelemente für Farbschemata bietet.

2 Bootflat

Es ist ein Open-Source-Framework, das auf Bootstrap basiert.

3 BootPress

Es ist ein PHP-Framework, das auf Flatfile-CMS basiert

4 Bootstrap

Es ist ein leistungsstarkes mobiles First-Front-End-Framework für eine schnellere und einfachere Webentwicklung.

5 Bootstrap a11y Thema

Es bietet einfachen Zugriff auf die Webentwicklung.

6 Bootswatch

Es ist ein Open-Source-Thema, das kostenlose Themen für Bootstrap bereitstellt.

7 Kardinal

Es handelt sich um ein Mobile-First-CSS-Framework, mit dem CSS für reaktionsfähige Websites, Benutzeroberflächen und Anwendungen verwaltet werden kann.

8 CSSHorus

Es ist eine Bibliothek, die die einfache Entwicklung mobiler Websites ermöglicht.

9 Flache Benutzeroberfläche kostenlos

Es basiert auf Bootstrap 3, das grundlegende und komplexe Komponenten enthält und ein Design für Bootstrap bietet.

10 Frontsize

Es ist ein Frontend-Framework, das eine Reihe von Tools zum Erstellen von Widgets enthält.

11

InContent

Es gibt die Beschreibung des Bildes mit CSS3 und SASS / LESS an.

12 Tinte

Es werden reaktionsschnelle Webschnittstellen erstellt.

13 JBST

Es ist ein leistungsstarkes Theme-Framework, das zum Erstellen untergeordneter Themes für WordPress und als eigenständiger Website-Builder verwendet wird.

14 KNACSS

Es wird verwendet, um HTML / CSS-Projekte mithilfe von reaktionsschnellen und erweiterbaren Stylesheets zu entwickeln.

15 Kube

Es ist ein CSS-Framework, das für professionelle Designer und Entwickler verwendet wird.

16 Metro UI CSS

Es ist ein Frontend-Framework, das zum Erstellen von Windows Metro Style für die Projekte verwendet wird.

17 Vor

Es ist das CSS-Framework, das WENIGER verwendet.

18 Auftakt

Es ist das Frontend-CSS-Framework, das WENIGER verwendet.

19 Schema

Es ist ein leichtes und reaktionsschnelles Framework, mit dessen Hilfe komplexe Websites erstellt werden können.

20 Semantische Benutzeroberfläche

Es ist ein Benutzeroberflächen-Framework, das reaktionsschnelle Layouts mit HTML erstellt.

21 UIkit

Es ist ein Frontend-Framework, das HTML-, CSS- und JS-Komponenten enthält und einfach zu verwendende und zu entwickelnde Webanwendungen umfasst.

22

ngBoilerplate

Es ist ein grunzbasiertes Build-System, das für AngularJS-Projekte verwendet wird.

23 weniger Schiene

Es ist eine dynamische Stylesheet-Sprache, die Less.js für Rails-Projekte verwendet.

24 Wee

Es ist ein Frontend-Framework, das HTML-, CSS- und JavaScript-Bootstrap-Komponenten für die Entwicklung reaktionsfähiger Webprojekte enthält.

Netzsysteme

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

Sr.Nr. Framework & Beschreibung
1 Flexibles Rastersystem

Es ist ein CSS-Framework, das Webprojekte auf flexible Weise erstellt.

2 adaptGrid

Es ist ein responsives Grid-System zur Entwicklung von Webanwendungen.

3 Fließfähig

Es ist ein leichtes responsives Grid-System, das auf einem WENIGER Präprozessor basiert.

4 Golden Grid System

Es ist ein Rastersystem für responsives Design.

5 WENIGER Zen Grid

Es wird zum Lösen von Subpixel-Rundungsproblemen verwendet.

6 Bestelllos

Es ist eine WENIGER Bibliothek, die für Ausrichtung, Rastersystem und modulare Skalen verwendet wird.

7 verantwortungsbewusst

Es ist ein anpassbares und eigenständiges Rastersystem.

8 Responsive Boilerplate

Es ist ein leichtes Rastersystem, mit dem ein ansprechendes Webdesign für die Websites erstellt wird.

9 Semantic.gs

Dies ist die Standardverteilung des Webbrowsers an das Betriebssystem.

Mixin-Bibliotheken

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

Sr.Nr. Framework & Beschreibung
1 3L

Es bietet die neuesten CSS3-Funktionen für den WENIGER Präprozessor.

2 animieren

Es ist eine Bibliothek, die für in den Projekten verwendete Browseranimationen verwendet wird.

3 Klar

Es werden wiederverwendbare WENIGER Mixins verwendet, ohne den Stil zu zerstören und in Stylesheets eine übermäßige Größe zu erzeugen.

4 Css3LessPlease

Es konvertiert css3please.com in WENIGER Mixins und das Element erhält sofort Änderungen, wenn Sie das CSS ausführen.

5 CssEffects

Es bietet CSS-Stileffekte, die als WENIGER Mixins geschrieben wurden.

6 Cssowl

Es ist eine Mixin-Bibliothek, die LESS, SASS und Stylus unterstützt.

7 cube.less

Es ist ein animierter 3D-Würfel, der nur mit CSS erstellt wurde.

8 tRRtoolbelt.less

Es ist eine Bibliothek, die Mixins und Funktionen zum Ausführen von Aktionen für WENIGER Dateien bereitstellt.

9 Europäische Sommerzeit

Es basiert auf WENIGER, wodurch WENIGER Code effizienter geschrieben werden kann.

10 Hexagon

Es werden CSS-Sechsecke mit Größe und Farbe erstellt.

11 obdachlos

Es ist eine Mixin-Bibliothek, die hilfreiche Funktionen für Less.js enthält.

12

LESS Elements

Es ist eine Sammlung von Mixins für den WENIGER Präprozessor.

13 WENIGER Hut

Es ist eine Mixin-Bibliothek, die beim Exportieren von CSS für alle Browser hilft und eine Reihe von Schatten, Verläufen und Animationen usw. erstellt.

14 Lessley

Es ist eine Testsuite, die in WENIGER geschrieben ist.

15 WENIGER-Bidi

Es ist eine Sammlung von WENIGER Mixins, die bidirektionales Styling ohne Duplizierung von Code bietet.

16

LESS-Mix

Es ist eine Mixin-Bibliothek, die in WENIGER geschrieben ist.

17 Medienabfrage zum Typ

Es wird zum Erstellen von Medienabfragen verwendet, mit denen Internet Explorer 8 und niedrigere Versionen auf den Inhalt zugreifen können.

18 Mehrfarben.los

Es bietet Variablen für die Farbmanipulation beim Entwerfen von Webanwendungen.

19 mehr-weniger

Es ist eine Bibliothek, die das Schreiben von CSS-Code aus Gründen der Cross-Browser-Kompatibilität ermöglicht.

20 Mehr

Es ist eine Kombination aus Compass und Twitter Bootstrap, die WENIGER durch die Verwendung von CSS3- und browserübergreifenden Mixins mehr bietet.

21 mehr oder weniger

Es bietet leistungsstarke Mixins für less.js.

22 normalisieren

Es bietet normalisiertes CSS mit WENIGER.

23 Oban

Es ist eine Sammlung von Mixins, die den Entwicklungsprozess der Webanwendung beschleunigen.

24 Preboot

Es handelt sich um eine Reihe von WENIGER-Diensten, die Mixins und Variablen zum Schreiben von besserem CSS verwenden und aus dem Bootstrap gebildet werden.

25 Vorspiel-Mixins

Es ist eine WENIGER Mixin-Bibliothek.

26 Formlos

Es bietet eine Reihe von Mixins zum Festlegen verschiedener Formen für die Anwendung.