Was ist der Unterschied zwischen sass und scss?

Unterschiede: 1. Sass verwendet das Suffix „.sass“ als Erweiterung, während SCSS das Suffix „.scss“ als Erweiterung verwendet. 2. Sass wird mit strengen Einrückungsgrammatikregeln geschrieben, ohne geschweifte Klammern „{}“ und Semikolon „;“, und die Syntax von SCSS ist der von CSS sehr ähnlich, mit geschweiften Klammern und Semikolons.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist Sass

Sass ist eine höhere Metasprache als CSS. Sie kann zur klaren und strukturellen Beschreibung von Dateistilen verwendet werden und verfügt über leistungsfähigere Funktionen als gewöhnliches CSS. Sass bietet eine sauberere, elegantere Syntax und bietet gleichzeitig eine Vielzahl von 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, was bedeutet 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.

Der Unterschied zwischen sass und scss

Sass und SCSS sind eigentlich dasselbe. Wir nennen es normalerweise Sass. Die Unterschiede zwischen den beiden sind unterschiedlich:

• Die Dateierweiterungen sind unterschiedlich „.sass“-Suffix als Erweiterung, während SCSS das „.scss“-Suffix als Erweiterung verwendet. Die Grammatik wird mit strengen eingerückten Grammatikregeln geschrieben, ohne geschweifte Klammern ({}) und Semikolon (;). Die Syntax von SCSS ist unserer CSS-Syntax sehr ähnlich.

• Im Folgenden werden ihre Kompilierungsregeln vorgestellt:

<span style="font-size: 18px;">sass</span>Hinweis:

„Einzeldateikompilierung“

und

“ Kompilierung mehrerer Dateien"

.

2. Sass-Ausgabemethode:

🎜🎜🎜sass verschachtelte Ausgabemethode nested🎜🎜sass --watch test.scss:test.css --style verschachtelt 🎜🎜Abbildung 1🎜🎜🎜sass erweiterte Ausgabemethodeexpanded🎜🎜sass --watch test.scss:test.css --style erweitert 🎜🎜Abbildung 2🎜🎜🎜sass-Erweiterungsausgabemethode compact🎜🎜sass --watch test.scss:test.css --style compact🎜🎜Abbildung 3 🎜🎜🎜sass-Erweiterungsausgabemethode komprimiert🎜🎜sass --watch test.scss:test.css --style komprimiert🎜🎜Abbildung 4🎜🎜🎜 🎜 🎜Screenshot-Vergleich:🎜🎜🎜🎜🎜🎜Zusätzlich zur obigen Einführung kann sass auch Addition/Subtraktion, Multiplikation, Division, Variablenberechnung, Zahlenoperation, Zeichenoperation, Farboperation usw. durchführen. 🎜🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜

Ausgabemethode	Übertragen Sie beim Kompilieren Parameter	Referenzbild

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen sass und scss?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!