Detaillierte Erläuterung des CSS-Präprozessors Less

CSS-Präprozessor

Warum es einen CSS-Präprozessor gibt

CSS ist im Grunde ein Designer-Tool, kein Programmierer-Tool. In den Augen von Programmierern bereitet CSS im Gegensatz zu anderen Programmiersprachen wie PHP, Javascript usw. eigene Variablen, Konstanten, bedingte Anweisungen und einige Programmiersyntaxen Das Schreiben ist ziemlich zeitaufwändig und der Code ist schwierig zu organisieren und zu warten.

Natürlich fragten sich einige Leute, ob einige Programmierelemente wie andere Programmiersprachen zu CSS hinzugefügt werden könnten, sodass CSS wie andere Programmiersprachen eine vorgegebene Verarbeitung durchführen könnte. Auf diese Weise gibt es einen „CSS-Präprozessor“.

Was ist ein CSS-Präprozessor?

Er ist eine Obermenge der CSS-Sprache und vollständiger als CSS.

Der CSS-Präprozessor definiert eine neue Sprache: Verwenden Sie eine spezielle Programmiersprache, um CSS einige Programmierfunktionen hinzuzufügen, verwenden Sie CSS als Ziel zum Generieren von Dateien und verwenden Sie dann einfach diese Sprache zum Codieren arbeiten.

Um es für den Laien auszudrücken: Der CSS-Präprozessor verwendet eine spezielle Programmiersprache, um Webseitenstile zu entwerfen, und kompiliert sie dann in eine normale CSS-Datei für die Projektverwendung. Der CSS-Präprozessor fügt CSS einige Programmierfunktionen hinzu, ohne dass Probleme mit der Browserkompatibilität berücksichtigt werden müssen. Sie können beispielsweise Variablen, einfache Logikprogramme, Funktionen usw. in CSS verwenden prägnanter, anpassungsfähiger, besser lesbar, einfacher zu warten und viele weitere Vorteile.

Die CSS-Präprozessortechnologie ist sehr ausgereift und es sind viele verschiedene CSS-Präprozessorsprachen entstanden, wie zum Beispiel: Sass (SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS usw. Es gibt so viele CSS-Präprozessoren, dass „Welchen CSS-Präprozessor soll ich wählen?“ in letzter Zeit zu einem heißen Thema im Internet geworden ist. Auf LinkedIn, Twitter, CSS-Trick, Zhihu und den wichtigsten technischen Foren streiten sich viele Leute darüber. Dies ist ein großer Fortschritt gegenüber der Frage, ob wir CSS-Präprozessoren verwenden sollten.

Unter den vielen hervorragenden CSS-Präprozessorsprachen sind bisher Sass, LESS und Stylus die besten, mit vielen Diskussionen und Vergleichen. In diesem Artikel werden Ihnen diese drei CSS-Präprozessorsprachen anhand ihres Hintergrunds, ihrer Installation, ihrer Verwendungssyntax, ihrer Unterschiede und anderer Vergleiche vorgestellt. Ich glaube, dass Front-End-Entwicklungsingenieure ihre eigene Entscheidung treffen werden – welchen CSS-Präprozessor soll ich wählen?

Einführung in less, less ist ein beliebtes Vorverarbeitungs-CSS, das Variablen, Mischungen, Funktionen, Verschachtelungen, Schleifen und andere Funktionen unterstützt. Syntax von

weniger

Kommentaren

Es kann zwei Arten von Kommentaren für weniger geben.

Die erste Art von Kommentar: Vorlagenkommentar

// Die Kommentare hier im Vorlagenkommentar werden nach der Konvertierung in CSS gelöscht

Weil weniger nötig ist in CSS konvertiert werden, bevor es im Browser verwendet werden kann. Nach der Konvertierung in CSS wird diese Art von Kommentar gelöscht (schließlich erkennt CSS diese Art von Kommentar nicht).

Die zweite Art von Kommentaren: CSS-Kommentarsyntax

/* CSS-Kommentarsyntax wird in CSS konvertiert und dann beibehalten */

Zusammenfassung: Wenn in weniger geschrieben Kommentare: Wir empfehlen, die erste Art von Kommentaren zu verfassen. Sofern es sich nicht um etwas Ähnliches wie das Urheberrecht handelt, wird die zweite Art der Anmerkung verwendet.

Variablen definieren

Wir können wiederverwendete oder häufig geänderte Werte als Variablen definieren und diese Variable einfach dort referenzieren, wo sie verwendet werden muss. Dadurch wird viel Doppelarbeit vermieden.

(1) Definieren Sie in der Less-Datei das Format einer Variablen:

@Variablenname: Variablenwert; //Format@bgColor: #f5f5f5; //Formatbeispiel

(2) Verweisen Sie gleichzeitig auf diese Variable in der Less-Datei.

Schließlich lautet der vollständige Code der Less-Datei wie folgt:

main.less：
// 定义变量@bgColor: #f5f5f5;// 引用变量body{    background-color: @bgColor;}

Nachdem wir die obige Less-Datei in eine CSS-Datei kompiliert haben (im nächsten Abschnitt geht es um die Kompilierung von Less). Datei), der automatisch generierte Code wie folgt:

main.css：
body{    background-color: #f5f5f5;}

Verwenden Sie verschachtelte

Untergeordnete Selektoren werden häufig in CSS verwendet. Der Effekt kann wie folgt sein:

.container {
  width: 1024px;}.container > .row {
  height: 100%;}.container > .row a {
  color: #f40;}.container > .row a:hover {
  color: #f50;}

Der obige Code verfügt über viele Verschachtelungsebenen, was das Schreiben umständlich macht. Wenn Sie diesen Code jedoch mit der verschachtelten Syntax von less schreiben, wird er prägnanter.

Ein Beispiel für eine Verschachtelung ist wie folgt:

main.less:
.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

Nachdem die oben genannte Less-Datei in eine CSS-Datei kompiliert wurde, lautet der automatisch generierte Code wie folgt:

main.css
.container {    width: 1024px;}.container > .row {    height: 100%;}.container > .row a {    color: #f40;}.container > .row a:hover {    color: #f50;}.container div {    width: 100px;}.container div .hello {    background-color: #00f;}

Ich glaube, Sie haben es gelesen. Sie beherrschen die Methoden in diesen Fällen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Die 20 am häufigsten verwendeten regulären Ausdrücke in JavaScript

Allgemeine Einstellungen für vscode

Wie um eine Dezimalzahl in eine Hexadezimalzahl umzuwandeln

So implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des CSS-Präprozessors Less. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!