Looking for less Answers? Try Ask4KnowledgeBase
Looking for less Keywords? Try Ask4Keywords

lessMit weniger loslegen


Bemerkungen

Weniger ist ein Open-Source-Vorprozessor. Es vereinfacht das Schreiben und Verwalten von CSS, indem der Autor Variablen, Mixins usw. definieren und verwenden kann. Außerdem verfügt es über Features wie Guards, mit denen bedingte Stile geschrieben werden können, Loops, die dazu beitragen, den Code trocken zu halten, und viele integrierte Funktionen um mathematische Operationen, String- und Farbmanipulationen usw. auszuführen

Nicht zu verwechseln mit dem gleichnamigen Unix-Tool.

Versionen

Ausführung Veröffentlichungsdatum
2.7.1 2016-05-09
2.7.0 2016-05-07
2.6.1 2016-03-04
2.6.0 2016-01-29
2.5.3 2015-09-25
2.5.2 2015-09-24
2.5.1 2015-05-21
2.5.0 2015-04-03
2.4.0 2015-02-07
2.3.1 2015-01-28
2.3.0 2015-01-27
2.2.0 2015-01-04
2.1.2 2014-12-20
2.1.1 2014-11-27
2.1.0 2014-11-23
2.0.0 2014-11-09
1.7.5 2014-09-03
1.7.4 2014-07-27
1.7.3 2014-06-22
1.7.2 2014-06-19
1.7.1 2014-06-08
1.7.0 2014-02-27
1.6.3 2014-02-08
1.6.2 2014-02-02
1.6.1 2014-01-12
1.6.0 2014-01-01
1.5.1 2013-11-17
1.5.0 2013-10-21
1.4.2 2013-07-20
1.4.1 2013-07-05
1.4.0 2013-06-05
1.3.3 2012-12-30
1.3.2 2012-12-28
1.3.1 2012-10-18
1.3.0 2012-03-10
1.2.1 2012-01-15
1.2.0 2012-01-07

Das Änderungsprotokoll für alle Versionen finden Sie auf der offiziellen GitHub-Seite .

Kompilieren einer Less-Datei über die Befehlszeile

lessc [options] <source> [destination]
 

Der obige Befehl wird verwendet, um weniger Dateien in der Befehlszeile zu kompilieren. Optionen sind die verschiedenen Einstellungen, die der Compiler während des Kompilierens oder nach dem Kompilieren verwenden soll. Zu den Optionen gehören -x oder --compress zum Komprimieren oder Minimieren der CSS-Ausgabedatei, -sm=on oder --strict-math=on zum Anwenden mathematischer Operationen nur auf in Klammern eingeschlossene Werte usw. Als Nächstes wird der Pfad der Quelle Less --strict-math=on Datei, die kompiliert werden muss. Ziel ist der Pfad und der Name der Ausgabedatei. Wenn dies nicht vorgesehen ist, wird die Ausgabe im Befehlszeilenfenster selbst ausgedruckt.

Betrachten Sie den folgenden Less-Code

/* Filename: test.less */
#demo {
 color: @color;
 background: beige;
 width: 100% / 4;
}
@color: red;
 

Kompiliertes CSS im Befehlsfenster drucken:

Wenn der folgende Befehl in der Befehlszeile ausgeführt wird, wird die Datei test.less kompiliert und die Ausgabe wird direkt im Befehlsfenster gedruckt, da kein Zielpfad angegeben wird.

lessc test.less
 

Ausgabe:

#demo {
  color: red;
  background: beige;
  width: 25%;
}
 

Erstellen Sie eine CSS-Datei und schreiben Sie die kompilierte Ausgabe in die Datei:

Wenn dieselbe Datei mit der folgenden Anweisung kompiliert wird, wird eine Datei mit dem Namen test.css im gleichen Pfad wie die Datei test.less erstellt und die Ausgabe in diese CSS-Datei gedruckt / geschrieben.

lessc test.less > test.css
 

Erstellen Sie eine CSS-Datei und minimieren Sie sie:

Der folgende Befehl druckt / schreibt die Ausgabe in eine CSS-Datei und komprimiert sie am Ende.

lessc -x test.less > test.css
 

Ausgabe:

#demo{color:red;background:beige;width:25%}
 

Wenn die Option Strikte Mathematik aktiviert ist:

Wenn die Option für strikte Übereinstimmung aktiviert ist, wird die Ausgabe wie folgt ausgeführt, da die Werte für width nicht in geschweifte Klammern eingeschlossen sind.

lessc -sm=on test.less > test.css
 

Ausgabe:

#demo {
  color: red;
  background: beige;
  width: 100% / 4;
}
 

Installation oder Setup

Less war einer der beliebtesten CSS-Pre-Prozessoren und wurde auch in zahlreichen Front-End-Frameworks wie Bootstrap, Foundation usw. eingesetzt. Der Less Compiler ist ein JavaScript-basierter Compiler, der über ein Content Delivery Network bezogen werden kann :

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 

Sie müssen Ihr Less-Dokument hinzufügen, bevor der JavaScript-Compiler mit dem <link /> -Tag geladen wird. Das Less Stylesheet sieht zusammen mit dem Compiler folgendermaßen aus:

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 

Hinweis: Das Kompilieren von weniger auf der Clientseite (oder im Browser) wird im Allgemeinen nicht empfohlen. Es sollte nur für die Entwicklung oder für die Verwendung dynamischer Einstellungen verwendet werden, die es nicht ermöglichen, serverseitig zu übersetzen.

Dateien verbinden - Importe

Mit der @import Anweisung können Sie CSS / Less-Code aus einer anderen Datei in Ihre eigene CSS / Less-Datei einfügen.

.foo {
  background: #900;
}
@import "my-other-css-file.css";
@import "my-other-less-file.less";
 

In weniger verschachteln

In Less können Sie viel einfachere CSS-Regeln schreiben und diese auch gut formatieren.

CSS

.item {
  border: 1px solid;
  padding: 4px;
}
.item .content, .item .image {
  float: left;
}
.item .content {
  font-size: 12px;
}
.item .image {
  width: 300px;
}
 

Sie können das einfach schreiben:

Weniger

.item {
  border: 1px solid;
  padding: 4px;
  .content, .image {
    float: left;
  }
  .content {
    font-size: 12px;
  }
  .image {
    width: 300px;
  }
}
 

und Less wird diesen Code in das normale CSS kompilieren, das wir alle kennen.

Probe weniger Syntax

Das folgende Beispiel ist eine Less-Beispieldatei, die zeigt, wie Variablen deklariert und verwendet werden, wie Mixins in Less definiert und aufgerufen werden.

/* Variables */
@color-base: #87ceeb;

/* Simple mixin to set border */

.set-border(@width; @style; @color) {
  border: @width @style darken(@color, 10%);
}

/* Main CSS */
.class1 {
  background-color: @color-base;
  .set-border(1px; solid; @color-base);
  .class2 {
    background-color: #fff;
    color: @color-base;
    .set-border(1px; solid; #fff);
  }
}
 

Der obige Code erzeugt beim Kompilieren das folgende CSS: (Kommentare werden der Kürze halber entfernt)

.class1 {
  background-color: #87ceeb;
  border: 1px solid #5bbce4;
}
.class1 .class2 {
  background-color: #fff;
  color: #87ceeb;
  border: 1px solid #e6e6e6;
}