Was ist der Unterschied zwischen Sass und SCSS?

Sass und SCSS: Welcher Präprozessor zu wählen?

Kernpunkte

• SASS und SCSS sind beide Präprozessor -Skriptsprachen, die in CSS zusammengestellt sind, aber eine andere Syntax haben. SASS verwendet die Einsatz-Syntax, während SCSS CSS-ähnliche Syntax verwendet. Dies bedeutet, dass SASS keine Semikolonen oder Klammern benötigt, während SCSS Klammern verwendet, um Codeblöcke darzustellen und Zeilen innerhalb von Blöcken mit Semikolonen zu trennen.
• Die Wahl von SASS und SCSS hängt von persönlichen Vorlieben und Projektanforderungen ab. Da SCSS jedoch eine ähnliche Syntax aufweist, ist es möglicherweise einfacher, SCSS für Anfänger oder solche zu beginnen, die bereits mit CSS vertraut sind. Es ist auch besser mit vorhandenen Werkzeugen, Plugins und Demos kompatibel, was es für viele Entwickler zu einer bequemeren Option macht.
• SASS und SCSS bieten beide fortgeschrittene Merkmale, die in normalen CSS nicht zu finden sind, wie Variablen, Verschachtelung, Mischung und Vererbung, die die CSS -Lesbarkeit, die Wartbarkeit und die Schreibeffizienz verbessern können. Die Verwendung von beiden erforderlichen Kompilierungsschritten, die die Komplexität des Build -Prozesses erhöhen können.

Dieser Artikel ist eine aktualisierte Version des Artikels am 28. April 2014

Ich habe viel über Sass geschrieben, aber einige der Kommentare, die ich erhalten habe, zeigen klar, dass nicht jeder genau weiß, worauf sich Sass bezieht. Hier sind einige Klarstellungen: Wenn wir über Sass sprechen, beziehen wir uns normalerweise auf Präprozessoren und die gesamte Sprache. Zum Beispiel würden wir sagen "Wir verwenden Sass" oder "Dies ist ein Sass -Mixin". In der Zwischenzeit ermöglicht SASS (Preprozessor) zwei verschiedene Syntaxe:

• sass, auch bekannt als Einrückungssyntax
• scss, eine Syntax ähnlich wie CSS

Geschichte von Sass

Anfangs war Sass Teil eines anderen Präprozessors namens Haml, der von Ruby Developers entworfen und geschrieben wurde. Daher verwendet das Sass Stylesheet eine rubinartige Syntax ohne Zahnspangen, Semikolons und strenge Einrückung wie folgt:

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

Wie Sie sehen, ist dies ein großer Unterschied im Vergleich zu normalem CSS! Selbst wenn Sie ein Sass -Benutzer sind, können Sie sehen, dass dies von dem unterschiedlich ist, was wir gewohnt sind. Das variable Symbol ist! Sehr seltsam. Aber so sah Sass vor der Veröffentlichung von Version 3.0 im Mai 2010 aus, in der eine brandneue Syntax namens SCSS für Sassy CSS eingeführt wurde. Diese Syntax zielt darauf ab, die Lücke zwischen SASS und CSS einzuschränken, indem eine benutzerfreundliche CSS-Syntax eingeführt wird.

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

scss ist näher an CSS als Sass. Das heißt, die Sass -Wartungen bemühen sich auch, die beiden Syntaxe durch Bewegen näher beieinander zu bringen! Wenn Sie nun ein neues Projekt starten, möchten Sie vielleicht wissen, welche Syntax Sie verwenden sollten. Lassen Sie mich Licht auf die Pfade werfen und die Vor- und Nachteile jeder Syntax erklären.

Vorteile der Sass -Eindringungssyntax

Während diese Syntax seltsam erscheinen mag, hat sie einige interessante Punkte. Erstens ist es kürzer und leichter zu betreten. Es werden keine Zahnspangen und Semikolons benötigt, Sie brauchen nicht all diese Dinge. besser! @mixin oder @Include ist nicht erforderlich, wenn ein einzelnes Zeichen ausreicht: = und. Darüber hinaus setzt die SASS -Syntax saubere Codierungsstandards durch, indem sie sich auf die Eindrücke stützt. Da die falsche Eindrücke wahrscheinlich das gesamte Sass-Stylesheet korrumpieren wird, stellt sie sicher, dass der Code immer sauber und gut geformt ist. Es gibt nur eine Möglichkeit, Sass -Code zu schreiben: ein guter Weg. Aber sei vorsichtig! Einrückung in Sass bedeutet etwas . Wenn Sie den Selektor einsetzen, bedeutet dies, dass er im vorherigen Selektor verschachtelt ist. Zum Beispiel:

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

… Das folgende CSS wird ausgegeben:

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

Die einfache Tatsache, die .Element-B eine Ebene nach rechts drückt, bedeutet, dass es sich um ein Kind von .element-A handelt, wodurch die erzeugten CSS geändert werden. Bitte

Sei sehr vorsichtig deine Eindrücke! Übrigens habe ich das Gefühl, dass die auf Inventationsbasis basierende Syntax für das Ruby/Python-Team besser geeignet ist als für das PHP/Java-Team (obwohl dies wohl das Gegenteil hören würde).

Vorteile der SCSS -Syntax

Für Anfänger ist es vollständig CSS -konform. Dies bedeutet, dass Sie die CSS -Datei in .Scss umbenennen können und sie funktioniert ordnungsgemäß. SCSS volles CSS -kompatibel war seit seiner Veröffentlichung eine oberste Priorität für SASS -Betreuer, und meiner Meinung nach ist es eine große Sache. Darüber hinaus versuchen sie, sich an die mögliche Syntax zu halten, die in Zukunft zu einer gültigen CSS -Syntax (und damit der @ -Richtlinie) werden kann. Da SCSS mit CSS kompatibel ist, bedeutet dies fast keine Lernkurve. Die Syntax ist bereits bekannt: Schließlich ist es nur CSS mit einer kleinen Menge zusätzlicher Inhalte. Dies ist wichtig, wenn Sie mit unerfahrenen Entwicklern arbeiten: Sie können schnell mit dem Codieren beginnen, ohne etwas über SASS zu wissen. Außerdem ist es einfacher zu lesen, weil es tatsächlich Sinn macht. Wenn Sie @Mixin lesen, wissen Sie, dass es sich um eine Mixin -Erklärung handelt. Es wird keine Verknüpfungen verwendet, und alles macht beim Vorlesen sinnvoll. Darüber hinaus werden die meisten vorhandenen Sass -Tools, Plugins und Demos unter Verwendung der SCSS -Syntax entwickelt. Im Laufe der Zeit wird diese Syntax immer wichtiger und wird zur Standardauswahl, hauptsächlich aus den oben genannten Gründen.

endgültige Gedanken

Die Option liegt bei Ihnen, aber es sei denn, Sie haben einen guten Grund, die Verwendung der Einverständlichkeitssyntax zu codieren, empfehle ich dringend, SCSS anstelle von SASS zu verwenden. Es ist nicht nur einfacher, sondern auch bequemer. Ich habe selbst die Einrückungssyntax ausprobiert und es gefallen. Mir gefällt, wie kurz und einfach es ist. Bevor ich meine Meinung im letzten Moment ändere, plane ich tatsächlich, die gesamte Codebasis bei der Arbeit auf SASS zu verschieben. Ich bin dankbar für mein früheres Selbst, das diesen Schritt verhindert hat, weil es sehr schwierig wäre, mit einigen unserer Tools zu arbeiten, wenn wir die Einrückungssyntax verwenden. Hinweis sass verwendet niemals Großbuchstaben, egal ob Sie über Sprache oder Grammatik sprechen. In der Zwischenzeit verwendet scss immer Großbuchstaben. Benötigen Sie eine Erinnerung? Sassnotsass.com kann dir helfen!

FAQs über Sass und SCSS

Was ist der Hauptunterschied zwischen Sass und SCSS?

SASS (Synonyme Stylesheets) und SCSS (Sassy CSS) sind beide Precessor -Skriptsprachen, die als Cascading Stylesheets (CSS) interpretiert werden. Der Hauptunterschied zwischen beiden ist ihre Syntax. SASS folgt einer Einrückungs-basierten Syntax, was bedeutet, dass keine Semikolons oder Klammern erforderlich sind. Andererseits folgt SCSS einer Syntax ähnlich wie CSS unter Verwendung von Klammern, um Codeblöcke und Trennlinien innerhalb von Blöcken mit Semikolonen zu trennen.

Kann ich Sass in SCSS umwandeln und umgekehrt?

Ja, Sie können Sass in SCSS umwandeln und umgekehrt. Es stehen mehrere Online -Tools zur Verfügung, mit denen Sie Ihren Code von einer Syntax in eine andere konvertieren können. Es ist jedoch zu beachten, dass während des Konvertierungsprozesses einige Funktionen aufgrund von Syntaxunterschieden möglicherweise nicht direkt konvertiert werden.

Ist es einfacher, Sass oder SCSS zu lernen?

Es hängt stark davon ab, wie vertraut Sie mit CSS sind. Wenn Sie bereits mit CSS vertraut sind, können Sie SCSS leichter lernen, da seine Syntax sehr ähnlich ist. Wenn Sie jedoch nicht mit CSS vertraut sind, finden Sie möglicherweise Sass 'basierende Syntax einfacher und intuitiver.

Kann ich SASS und SCSS im selben Projekt verwenden?

Technisch gesehen können Sie SASS und SCSS im selben Projekt verwenden. Es wird jedoch häufig empfohlen, sich an eine Syntax zu halten, um Konsistenz und Lesbarkeit zu gewährleisten. Gemischte Syntax kann Verwirrung verursachen und Ihren Code schwieriger machen.

Was sind die Vorteile der Verwendung von SASS oder SCSS gegenüber regulärem CSS?

SASS und SCSS bieten beide Funktionen, die in normalen CSS nicht verfügbar sind, wie Variablen, Verschachtel, Mischung, Vererbung usw. Diese Funktionen können Ihre Stylesheets erleichtern, wenn Sie das Lesen und Verwalten leichter machen und Ihnen Zeit und Mühe beim Schreiben von CSS sparen.

Ist SCSS das gleiche wie CSS?

Obwohl SCSS CSS in Bezug auf die Syntax ähnlich ist, sind sie nicht gleich. SCSS ist eine Präprozessorsprache, die CSS wie Variablen, Verschachtel, Mischung und Vererbung leistungsstarke Merkmale hinzufügt. Diese Funktionen sind in normalem CSS nicht erhältlich.

Benötige ich spezielle Werkzeuge, um Sass oder SCSS zu kompilieren?

Ja, Sie benötigen einen Compiler, um Sass oder SCSS in CSS umzuwandeln. Zu diesem Zweck stehen viele Werkzeuge zur Verfügung, wie Node-Sass, Dart-Sass und Ruby-Sass. Diese Tools können in Ihren Build -Prozess integriert werden, um Ihre SASS- oder SCSS -Dateien automatisch in CSS zu kompilieren.

Kann ich SASS oder SCSS mit einem CSS -Framework verwenden?

Ja, Sie können SASS oder SCSS mit jedem CSS -Framework verwenden. Viele beliebte CSS -Frameworks wie Bootstrap und Foundation bieten sogar SASS- oder SCSS -Versionen ihrer Stylesheets für eine einfachere Anpassung an.

Gibt es Nachteile bei der Verwendung von SASS oder SCSS?

Ein potenzieller Nachteil der Verwendung von SASS oder SCSS ist die Notwendigkeit von Kompilierungsschritten. Dies kann dem Build -Prozess Komplexität verleihen und zusätzliche Tools und Setups erfordern. Die Vorteile der Verwendung von SASS oder SCSS, wie die Verbesserung der Lesbarkeit und Wartbarkeit, überwiegen jedoch häufig diesen Nachteil.

Ist Sass oder SCSS beliebt?

Sass und SCSS werden beide weit verbreitet, aber SCSS scheint populärer zu sein, wahrscheinlich weil es CSS ähnlich ist. Die Wahl zwischen SASS und SCSS hängt jedoch normalerweise von den persönlichen Vorlieben und den spezifischen Anforderungen des Projekts ab.

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!