Was sind Scss und Sass?

Sass ist eine in der Ruby-Sprache geschriebene CSS-Vorverarbeitungssprache. Sass kann eine einfachere und elegantere Syntax bieten und gleichzeitig eine Vielzahl von Funktionen zum Erstellen wartbarer und verwaltbarer Stylesheets bereitstellen. Scss ist eine neue Syntax, die von Sass3 eingeführt wurde und eine Obermenge der CSS3-Syntax ist. Um es ganz klar auszudrücken: Scss ist eine aktualisierte Version von Sass.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, Sass-Version 3.7.4.

Empfohlen: CSS-Video-Tutorial

Was ist Sass?

Sass ist eine höhere Metasprache als CSS. Sie kann verwendet werden, um Dateistile klar und strukturiert zu beschreiben, und verfügt über mehr Funktionen als gewöhnliches CSS. Leistungsstarke Funktionen. Sass bietet eine sauberere, elegantere Syntax und bietet gleichzeitig Funktionen zum Erstellen wartbarer und verwaltbarer Stylesheets.

Sass ist eine in Ruby geschriebene CSS-Vorverarbeitungssprache. Sie wurde 2007 geboren und ist die größte ausgereifte CSS-Vorverarbeitungssprache. Es wurde ursprünglich für die Verwendung mit HAML (einem eingerückten HTML-Precompiler) entwickelt und verfügt daher über denselben Einrückungsstil wie HTML. SASS ist eine Erweiterung von CSS3, die Regelverschachtelung, Variablen, Mixins, Selektorvererbung und mehr hinzufügt. Konvertieren Sie es mithilfe von Befehlszeilentools oder WEB-Framework-Plug-Ins in standardmäßigen, wohlgeformten CSS-Code.

Offizielle Website von Sass: http://sass-lang.com

Was ist Scss?

Scss ist eine neue Syntax, die von Sass 3 eingeführt wurde. Es ist die Abkürzung für Sassy CSS und eine Obermenge der CSS3-Syntax , das heißt, dass alle gültigen CSS3-Stile auch für Sass gelten. Um es ganz klar auszudrücken: Scss ist eine aktualisierte Version von Sass. Seine Syntax ist vollständig mit CSS3 kompatibel und erbt die leistungsstarken Funktionen von Sass. Das heißt, jedes Standard-CSS3-Stylesheet ist eine gültige SCSS-Datei mit derselben Semantik. Darüber hinaus kann SCSS auch die meisten CSS-Hacks (einige CSS-Tricks) und browserspezifische Syntax erkennen, beispielsweise die alte IE-Filtersyntax.

Da Scss eine Erweiterung von CSS ist, funktioniert jeder Code, der in CSS ordnungsgemäß funktioniert, auch ordnungsgemäß in Scss. Mit anderen Worten: Ein Sass-Benutzer muss nur verstehen, wie Sass-Erweiterungen funktionieren, um Scss vollständig zu verstehen. Die meisten Erweiterungen wie Variablen, übergeordnete Referenzen und Direktiven sind identisch; der einzige Unterschied besteht darin, dass SCSS Semikolons und geschweifte Klammern anstelle von Zeilenumbrüchen und Einrückungen erfordert.

Ähnlichkeiten und Unterschiede zwischen Scss und Sass

Sass und Scss sind eigentlich dasselbe. Die Hauptunterschiede zwischen den beiden sind die folgenden zwei Punkte:

1. Sass hat das Suffix „.sass“ als Erweiterung und Scss hat das Suffix „.scss“ als Erweiterung.

2. Die Schreibweise der Grammatik von Sass unterscheidet sich stark von der Schreibweise unserer CSS-Grammatik. ähnlich.

Wir könnten uns auch die folgenden zwei Codeteile ansehen, die intuitiver und leichter zu verstehen sind.

Einfacher Sass-Code

#sidebar
width: 30%
background-color: #faa

Entsprechender Scss-Code

#sidebar {
   width: 30%;
   background-color: #faa;
}

Außerdem reagiert SCSS nicht auf Leerzeichen. Der obige Code kann auch wie folgt geschrieben werden:

#sidebar {width: 30%; background-color: #faa}

Wir könnten genauso gut ein paar weitere Teile des Scss-Codes teilen

Sass erlaubt verschachtelte Selektoren. Zum Beispiel der folgende CSS-Code:

div {
     h1 {
        color:blue;
    }
 }

Der Ausgabe-CSS-Stil ist

div h1 {
    color: blue;
}

In verschachtelten Codeblöcken können Sie & verwenden, um auf das übergeordnete Element zu verweisen. Die a:hover-Pseudoklasse kann beispielsweise wie folgt geschrieben werden:

a {
    &:hover { color: #0099cc; }
}

Der Ausgabe-CSS-Stil ist

a:hover {
   color: #0099cc;
}

Weitere programmierbezogene Kenntnisse finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonWas sind Scss und Sass?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!