Nach dem, was ich gelesen habe, ist Sass eine Sprache, die CSS mit variabler und mathematischer Unterstützung leistungsfähiger macht.
Was ist der Unterschied zu SCSS? Soll es die gleiche Sprache sein? Ähnlich? Anders?
Sass ist ein CSS-Vorprozessor mit Syntaxverbesserungen. Stylesheets in der erweiterten Syntax werden vom Programm verarbeitet und in reguläre CSS-Stylesheets umgewandelt. Sie erweitern jedoch nicht den CSS-Standard selbst.
CSS-Variablen werden unterstützt und können verwendet werden, jedoch nicht so gut wie Vorprozessorvariablen.
Für den Unterschied zwischen SCSS und Sass sollte dieser Text auf der Sass-Dokumentationsseite die Frage beantworten:
Für Sass stehen zwei Syntaxen zur Verfügung. Das erste, das als SCSS (Sassy CSS) bekannt ist und in dieser Referenz verwendet wird, ist eine Erweiterung der Syntax von CSS. Dies bedeutet, dass jedes gültige CSS-Stylesheet eine gültige SCSS-Datei mit derselben Bedeutung ist. Diese Syntax wird durch die unten beschriebenen Sass-Funktionen erweitert. Dateien, die diese Syntax verwenden, haben die Erweiterung .scss .
Die zweite und ältere Syntax , die als eingerückte Syntax (oder manchmal auch nur als „Sass“) bezeichnet wird, bietet eine präzisere Methode zum Schreiben von CSS. Es werden Einrückungen anstelle von Klammern verwendet, um die Verschachtelung von Selektoren anzuzeigen, und Zeilenumbrüche anstelle von Semikolons, um Eigenschaften zu trennen. Dateien, die diese Syntax verwenden, haben die Erweiterung .sass .
All dies funktioniert jedoch nur mit dem Sass-Pre-Compiler, der am Ende CSS erstellt. Es ist keine Erweiterung des CSS-Standards.
scss
undsass
ist heutzutage mehr als nur eine persönliche Präferenz.scss
ist viel häufiger - in dem beliebtestenen CSS - Frameworks verwendet wieBootstrap
,Foundation
,Materialize
usw. Das wichtigste UI - Frameworks begünstigtscss
übersass
standardmäßig - Angular, Reaktion, Vue. Alle Tutorials oder Demos werden im Allgemeinenscss
zBcreate-react-app
facebook.github.io/create-react-app/docs/…Ich bin einer der Entwickler, die bei der Erstellung von Sass mitgewirkt haben.
Der Unterschied ist die Benutzeroberfläche. Unter dem textuellen Äußeren sind sie identisch. Aus diesem Grund können sich sass- und scss-Dateien gegenseitig importieren. Tatsächlich verfügt Sass über vier Syntax-Parser: scss, sass, CSS und weniger. Alle diese konvertieren eine andere Syntax in einen abstrakten Syntaxbaum, der über das sass-convert-Tool in die CSS-Ausgabe oder sogar in eines der anderen Formate weiterverarbeitet wird.
Verwenden Sie die Syntax, die Ihnen am besten gefällt. Beide werden vollständig unterstützt und Sie können später zwischen ihnen wechseln, wenn Sie Ihre Meinung ändern.
quelle
Die Sass-
.sass
Datei unterscheidet sich optisch von der.scss
Datei, zExample.sass - sass ist die ältere Syntax
Example.scss - sassy css ist die neue Syntax ab Sass 3
Jedes gültige CSS-Dokument kann einfach durch Ändern der Erweiterung von
.css
in in Sassy CSS (SCSS) konvertiert werden.scss
.quelle
.scss
auf.css
die gleiche wie.css
auf.scss
?.css
einfach gültig.scss
. Sobald Sie scss-spezifischen Code hinzufügen, wird das Ändern des Dateinamens als ungültige CSS-Datei angezeigt.css
ist ein Quadrat undscss
ist ein Rechteck. Alle Quadrate sind Rechtecke, aber nicht alle Rechtecke sind Quadrate.Sass ( Syntactically Awesome StyleSheets ) hat zwei Syntaxen:
Sie sind also beide Teil des Sass- Präprozessors mit zwei verschiedenen möglichen Syntaxen.
Der wichtigste Unterschied zwischen SCSS und Original Sass :
SCSS :
Die Syntax ähnelt CSS (so sehr, dass jedes regulär gültige CSS3 auch gültiges SCSS ist , aber die Beziehung in die andere Richtung kommt offensichtlich nicht vor).
Verwendet Zahnspangen
{}
;
:
@mixin
Direktive verwendet@include
DirektiveOriginal Sass :
=
statt:
=
Zeichen verwendet+
ZeichenEinige bevorzugen Sass , die ursprüngliche Syntax - während andere SCSS bevorzugen . So oder so, aber es ist erwähnenswert, dass die eingerückte Syntax von Sass nicht veraltet war und niemals veraltet sein wird .
Konvertierungen mit sass-convert :
Die Sass- und SCSS-Dokumentation
quelle
Die Syntax ist unterschiedlich und das ist das wichtigste Pro (oder Contra, abhängig von Ihrer Perspektive).
Ich werde versuchen, nicht viel von dem zu wiederholen, was andere gesagt haben. Sie können das leicht googeln, aber stattdessen möchte ich ein paar Dinge aus meiner Erfahrung mit beiden sagen, manchmal sogar im selben Projekt.
SASS pro
.sass
ist viel einfacher 'und lesbar als in.scss
(subjektiv).SASS cons
body color: red
Spielbruch ), du kannst nicht so machen wie in .scssbody {color: red}
.scss
Dateien (neben.sass
Dateien) in Ihrem Projekt zu haben oder diese zu konvertieren.sass
.Davon abgesehen machen sie den gleichen Job.
Was ich jetzt gerne mache, ist, Mixins und Variablen in einen
.sass
Code zu schreiben , der nach.scss
Möglichkeit tatsächlich in CSS kompiliert wird (dh Visual Studio unterstützt dies nicht,.sass
aber wenn ich an Rails-Projekten arbeite, kombiniere ich normalerweise zwei davon, nicht in einer Datei von c).In letzter Zeit denke ich darüber nach, Stylus eine Chance zu geben (für einen Vollzeit-CSS-Präprozessor), da Sie damit (unter anderem) zwei Syntaxen in einer Datei kombinieren können. Das ist vielleicht keine gute Richtung für ein Team, aber wenn Sie es alleine beibehalten, ist es in Ordnung. Der Stift ist tatsächlich am flexibelsten, wenn die Syntax in Frage kommt.
Und finaly für mixin
.scss
vs.sass
Syntax Vergleich:quelle
Von der Homepage der Sprache
SASS ist eine interpretierte Sprache, die CSS ausspuckt. Die Struktur von Sass sieht aus wie CSS (remote), aber es scheint mir, dass die Beschreibung etwas irreführend ist; Es ist kein Ersatz für CSS oder eine Erweiterung. Es ist ein Interpreter, der am Ende CSS ausspuckt, also hat Sass immer noch die Einschränkungen von normalem CSS, aber er maskiert sie mit einfachem Code.
quelle
Der grundlegende Unterschied ist die Syntax. Während SASS eine lose Syntax mit Leerzeichen und keinen Semikolons hat, ähnelt das SCSS eher dem CSS.
quelle
Ein Beispiel für eine SCSS- und SASS-Syntax:
SCSS
SASS
CSS nach der Kompilierung ausgeben (für beide gleich)
Weitere Anleitungen finden Sie auf der offiziellen Website .
quelle
Sass war der erste und die Syntax ist etwas anders. Zum Beispiel einschließlich eines Mixins:
Sass ignoriert geschweifte Klammern und Semikolons und lag auf der Verschachtelung, was ich nützlicher fand.
quelle
Der Unterschied zwischen SASS- und SCSS- Artikel erklärt den Unterschied in Details. Lassen Sie sich nicht von den SASS- und SCSS-Optionen verwirren, obwohl ich es ursprünglich auch war. .Sss ist freches CSS und die nächste Generation von .sass.
Wenn das keinen Sinn ergab, können Sie den Unterschied im Code unten sehen.
Im obigen Code verwenden wir; die Erklärungen zu trennen. Ich habe sogar alle Deklarationen für .border in eine einzelne Zeile eingefügt, um diesen Punkt weiter zu veranschaulichen. Im Gegensatz dazu muss sich der folgende SASS-Code in verschiedenen Zeilen mit Einrückung befinden, und es wird keine Verwendung von;
Sie können dem folgenden CSS entnehmen, dass der SCSS-Stil dem normalen CSS viel ähnlicher ist als der ältere SASS-Ansatz.
Ich denke, heutzutage bezieht sich die meiste Zeit, wenn jemand erwähnt, dass er mit Sass arbeitet, eher auf das Verfassen in .scss als auf die traditionelle .sass-Art.
quelle
Original
sass
ist Ruby-Syntax-ähnlich, ähnlich wie Ruby, Jade etc ...In diesen Syntaxen verwenden wir keine
{}
Leerzeichen, stattdessen verwenden wir Leerzeichen, auch keine Verwendung von;
...In
scss
Syntax sind eher wieCSS
, aber mit mehr Optionen wie: Verschachteln, Deklarieren, etc., ähnlichless
und andere VorverarbeitungCSS
...Sie haben im Grunde das Gleiche, aber ich habe paar Zeilen jeweils die Syntax Unterschied zu sehen, Blick auf die
{}
,;
, undspaces
:SASS:
SCSS:
quelle
Die kompakte Antwort:
SCSS bezieht sich auf die Hauptsyntax, die vom Sass CSS-Vorprozessor unterstützt wird .
.scss
stellen die von Sass unterstützte Standardsyntax dar. SCSS ist eine Obermenge von CSS..sass
stellen die "ältere" Syntax dar, die von Sass mit Ursprung in der Ruby-Welt unterstützt wird.quelle
SASS ist Syntactically Awesome Style Sheets und eine Erweiterung von CSS, die die Funktionen von verschachtelten Regeln, Vererbung und Mixins bietet, während SCSS Sassy Cascaded Style Sheets ist, die denen von CSS ähnlich sind und die Lücken und Inkompatibilitäten zwischen CSS und SASS füllen. Es wurde unter der MIT-Lizenz lizenziert. Dieser Artikel enthält weitere Informationen zu den Unterschieden: https://www.educba.com/sass-vs-scss/
quelle