Sprechen Sie über drei Arten von Präprozessoren in CSS

In diesem Artikel stellen wir Ihnen drei CSS-Präprozessoren vor und vergleichen sie, um die Unterschiede zwischen ihnen zu verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1. Einführung

CSS-Präprozessor definiert eine neue Sprache. Die Grundidee besteht darin, diese Sprache nur für Codierungsarbeiten zu verwenden, wodurch langweilige und langweilige Arbeiten reduziert werden Durch den Schreibprozess von CSS-Code kann Ihr CSS prägnanter, anpassungsfähiger, besser lesbar, in hierarchischen Beziehungen offensichtlicher und einfacher zu verwaltender Code werden.

Es gibt viele Arten von CSS-Präprozessoren. Die drei gängigen CSS-Präprozessoren sind Less, Sass (Scss) und Stylus. Mit Unterstützung der Ruby-Community und Compass, dem leistungsstärksten CSS-Framework.

Derzeit von LESS beeinflusst, hat es sich zu SCSS entwickelt, das vollständig mit CSS kompatibel ist (SCSS erfordert die Verwendung von Semikolons und geschweiften Klammern anstelle von Zeilenumbrüchen und Einzügen).

Less: Erschienen im Jahr 2009. Es ist stark von SASS beeinflusst, verwendet aber auch CSS-Syntax, was den Einstieg für die meisten Entwickler und Designer erleichtert. Seine Unterstützer außerhalb der Ruby-Community sind weit über SASS hinaus.

Der Nachteil besteht darin, dass es im Vergleich zu SASS nicht über unzureichende programmierbare Funktionen verfügt.

Der Vorteil besteht jedoch darin, dass es einfach und mit CSS kompatibel ist, was wiederum die Entwicklung von SASS in die Ära von SCSS beeinflusst hat. Das berühmte Twitter Bootstrap verwendet LESS als zugrunde liegende Sprache.

Stylus: Produziert im Jahr 2010 von der Node.js-Community.

Es wird hauptsächlich verwendet, um CSS-Vorverarbeitungsunterstützung für Node-Projekte bereitzustellen. Es hat bestimmte Unterstützer in dieser Community, aber im Großen und Ganzen ist seine Popularität nicht so groß wie SASS und LESS.

2. Vergleich

Das Wichtigste vor der Verwendung des CSS-Präprozessors ist, die Syntax der meisten Präprozessoren zu verstehen.

Erstens verwenden sowohl Sass als auch Less die Standard-CSS-Syntax. Wenn Sie also vorhandenen CSS-Code problemlos in Präprozessorcode konvertieren können, verwendet Sass standardmäßig die Erweiterung .sass, während Less die Erweiterung .less verwendet.

h1 {
  color: #0982C1;
}

Dies ist eine sehr häufige Syntax, aber Sass unterstützt auch die alte Syntax, die keine geschweiften Klammern und Semikolons enthält:

h1
  color: #0982c1

Die von Stylus unterstützte Syntax ist vielfältiger und verwendet standardmäßig die Dateierweiterung von styl, die folgende Syntax wird von Stylus unterstützt:

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

Sie können verschiedene Variablen im selben Stylesheet verwenden. Beispielsweise meldet die folgende Schreibmethode keinen Fehler:

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

Verwandte Empfehlungen:

2020 Zusammenfassung der Front-End-Vue-Interviewfragen (mit Antworten)

Vue-Tutorial-Empfehlung: 2020 neueste 5 vue.js-Video-Tutorial-Auswahl

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonSprechen Sie über drei Arten von Präprozessoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!