Detaillierte Erläuterung der vorkompilierten CSS-Sprachen und ihrer Unterschiede

1. Was ist

Als Auszeichnungssprache hat CSS eine relativ einfache Syntax und geringe Anforderungen an die Benutzer, bringt aber auch einige Probleme mit sich

Es muss viel scheinbar unlogischer Code geschrieben werden, der für die Wartung und Erweiterung unpraktisch ist und der Wiederverwendung nicht förderlich ist. Insbesondere für Nicht-Front-End-Entwicklungsingenieure ist es aufgrund mangelnder Erfahrung im Schreiben von CSS oft schwierig, gut organisierten und leicht zu wartenden CSS-Code zu schreiben.

CSS-Präprozessor ist die Lösung für die oben genannten Probleme

Vorverarbeitungssprache

Erweiterung der CSS-Sprache, Hinzufügung von Features wie Variablen, Mixins, Funktionen usw., wodurch CSS einfacher zu warten und bequemer wird

Im Wesentlichen ist die Vorverarbeitung eine Obermenge von CSS

Enthält eine Reihe benutzerdefinierter Syntax und einen Parser. Anhand dieser Syntax können Sie Ihre eigenen Stilregeln definieren. Diese Regeln werden schließlich vom Parser kompiliert, um die entsprechenden CSS-Dateien zu generieren.

2. Was sind sie

Es gibt drei hervorragende vorkompilierte Prozessoren im Frontend der vorkompilierten CSS-Sprache, nämlich:

• frech
• weniger
• Stift

frech

Es wurde 2007 entwickelt und ist der früheste und ausgereifteste CSS-Präprozessor. Es wird von der Ruby-Community und Compass, dem leistungsstärksten CSS-Framework, unterstützt. Derzeit hat es sich zu Scss weiterentwickelt, das vollständig mit CSS kompatibel ist und von LESS beeinflusst wurde.

Die Dateiendung lautet .sass und scss. Dabei kann man sich strikt an die Einrückungsmethode von sass halten und die geschweiften Klammern und Semikolons weglassen.

weniger

Es erschien 2009 und ist stark von SASS beeinflusst, verwendet aber die Syntax von CSS, was den meisten Entwicklern und Designern den Einstieg erleichtert. Außerhalb der Ruby-Community hat es weitaus mehr Anhänger als SASS.

Sein Nachteil besteht darin, dass ihm im Vergleich zu SASS programmierbare Funktionen fehlen, seine Vorteile liegen jedoch in der Einfachheit und Kompatibilität mit CSS, was wiederum die Entwicklung von SASS bis zur Ära von Scss beeinflusste.

Stift

Stylus ist ein CSS-Vorverarbeitungsframework. Es wurde 2010 von der Node.js-Community entwickelt und wird hauptsächlich verwendet, um CSS-Vorverarbeitungsunterstützung für Node-Projekte bereitzustellen.

Stylus ist also eine neue Sprache, die robustes, dynamisches und ausdrucksstarkes CSS erstellen kann. Es ist relativ jung und macht im Wesentlichen dasselbe wie SASS/LESS usw.

3. Unterschied

Obwohl verschiedene Präprozessoren leistungsstark sind, werden am häufigsten die folgenden verwendet:

• Variablen
• Umfang
• Code-Mixins
• Verschachtelte Regeln
• Module

Daher werden im Folgenden diese Unterschiede näher erläutert.

Grundlegende Verwendung

weniger und scss

.Kasten {
  Anzeige: Block;
}

frech

.Kasten
  Anzeige: Block

Stift

.Kasten
  Anzeige: Block

Verschachtelung

Die Verschachtelungssyntax ist bei allen dreien gleich, sogar das &-Tag, das auf den übergeordneten Selektor verweist, ist gleich.

Der einzige Unterschied besteht darin, dass Sass und Stylus ohne geschweifte Klammern geschrieben werden können.

weniger

.A {
  &.B {
    Farbe: rot;
  }
}

Variable

Variablen stellen zweifellos eine effektive Möglichkeit zur Wiederverwendung von CSS dar und reduzieren die wiederholte „harte Codierung“, die bei CSS ursprünglich unvermeidbar war.

Die von Less deklarierten Variablen müssen mit @ beginnen, gefolgt vom Variablennamen und dem Variablenwert, und der Variablenname und der Variablenwert müssen durch einen Doppelpunkt getrennt sein:

@rot: #c00;

stark {
  Farbe: @red;
}

In Sass deklarierte Variablen sind denen in Less deklarierten sehr ähnlich, mit der Ausnahme, dass den Variablennamen ein @ vorangestellt ist.

$rot: #c00;

stark {
  Farbe: $rot;
}

Es gibt keine Einschränkung für die von Stylus deklarierten Variablen. Sie können am Anfang $ und am Ende ein Semikolon verwenden. Dies ist optional, aber zwischen Variablen und ihren Werten ist = erforderlich.

In Stylus empfehlen wir nicht, das @-Symbol zu verwenden, um Variablendeklarationen zu beginnen

rot = #c00

stark
  Farbe: rot

Umfang

Der CSS-Präcompiler weist Variablen einen Gültigkeitsbereich zu, was bedeutet, dass sie einen Lebenszyklus haben. Genau wie js sucht es zuerst im lokalen Bereich und dann im übergeordneten Bereich nach Variablen.

Es gibt keine globalen Variablen in Sass

$Farbe: schwarz;
.Bereich {
  $bg: blau;
  $Farbe: weiß;
  Farbe: $farbe;
  Hintergrundfarbe: $bg;
}
.unscoped {
  Farbe:$farbe;
} 

Nach der Kompilierung

.Bereich {
  Farbe: weiß;/* ist weiß*/
  Hintergrundfarbe: blau;
}
.unscoped {
  Farbe:weiß;/*weiß (kein globales Variablenkonzept)*/
}

Daher ist es am besten, nicht den gleichen Variablennamen in Sass zu definieren

Der Umfang von Less und Stylus ist dem von Javascript sehr ähnlich. Zuerst suchen sie nach lokal definierten Variablen. Wenn sie diese nicht finden, suchen sie Ebene für Ebene nach unten, bis sie die Wurzel erreichen, genau wie beim Bubbling.

@Farbe: Schwarz;
.Bereich {
  @bg: blau;
  @Farbe: weiß;
  Farbe: @farbe;
  Hintergrundfarbe: @bg;
}
.unscoped {
  Farbe:@farbe;
}

Nach der Kompilierung:

.Bereich {
  Farbe:weiß;/*weiß (lokale Variable wird aufgerufen)*/
  Hintergrundfarbe: blau;
}
.unscoped {
  Farbe: schwarz;/*schwarz (globale Variable wird aufgerufen)*/
}

Mischen

Mixin ist eine der wichtigsten Funktionen von Präprozessoren. Einfach ausgedrückt können Mixins einige Stile extrahieren und sie als separate Module definieren, die von vielen Selektoren wiederverwendet werden können.

Sie können Variablen oder Standardparameter in Mixins definieren

In weniger bedeutet gemischte Verwendung, dass eine andere definierte Klasse in die definierte Klasse A eingeführt wird und auch Parameter übergeben werden können. Die Parametervariable ist die @-Deklaration.

.Alarm {
  Schriftstärke: 700;
}

.highlight(@farbe: rot) {
  Schriftgröße: 1,2em;
  Farbe: @farbe;
}

.Kopf hoch {
  .Alarm;
  .hervorheben(rot);
}

Nach der Kompilierung

.Alarm {
  Schriftstärke: 700;
}
.Kopf hoch {
  Schriftstärke: 700;
  Schriftgröße: 1,2em;
  Farbe: rot;
}

Wenn Sie Mixins in Sass deklarieren, müssen Sie @mixinn verwenden, gefolgt vom Namen des Mixins. Außerdem können Sie Parameter festlegen. Der Parametername ist das variable $declaration-Format.

@mixin großer Text {
  Schriftart:
    Familie: Arial;
    Größe: 20px;
    Gewicht: fett;
  }
  Farbe: #ff0000;
}

.Seitentitel {
  @include großen Text;
  Polsterung: 4px;
  Rand oben: 10px;
}

Mixins in Stylus unterscheiden sich geringfügig von den beiden vorherigen CSS-Präprozessorsprachen. Sie können Mixins-Namen direkt deklarieren, ohne Symbole zu verwenden, und dann ein Gleichheitszeichen (=) verwenden, um die definierten Parameter und Standardwerte zu verbinden.

Fehler(Rahmenbreite= 2px) {
  Rahmen: Rahmenbreite durchgezogen #F00;
  Farbe: #F00;
}
.generischer-Fehler {
  Polsterung: 20px;
  Rand: 4px;
  error(); /* Fehler-Mixins aufrufen */
}
.Anmeldefehler {
  links: 12px;
  Position: absolut;
  oben: 20px;
  error(5px); /* Rufe Fehler-Mixins auf und setze den Wert des Parameters $borderWidth auf 5px */
}

Code-Modularität

Modularisierung bedeutet, den CSS-Code in Module aufzuteilen

Die Verwendung von scss, less und stylus ist wie folgt

@import './allgemein';
@import './github-markdown';
@import './mixin';
@import './Variablen';

Verweise

https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA

Dies ist das Ende dieses Artikels über vorkompilierte CSS-Sprachen und ihre Unterschiede. Weitere relevante vorkompilierte CSS-Sprachen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!