Was ist der Unterschied zwischen SCSS und Sass?

1901

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?

bruno077
quelle

Antworten:

1865

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.

Ruffin
quelle
229
Beachten Sie bei der Auswahl der Syntax, dass nur scss das Kopieren und Einfügen von CSS aus dem Stackoverflow und den Entwicklungstools der Browser ermöglicht, während Sie in sass immer die Syntax anpassen müssen
fishbone
Ein weiteres Problem: Ab dem 10.05.2019 unterstützt SASS immer noch keine mehrzeiligen Ausdrücke. Daher müssen große Listen / Maps entweder einzeilig sein, mit vielen Funktionsaufrufen definiert oder in SCSS-Dateien definiert werden. Es scheint immer noch ein geplantes Feature zu sein, aber ich bin mir nicht sicher, ob es tatsächlich eine Bewegung bei der Implementierung gibt oder noch nicht.
Joseph Sikorski
12
@ 0x1ad2 Die Wahl zwischen scssund sassist heutzutage mehr als nur eine persönliche Präferenz. scssist viel häufiger - in dem beliebtestenen CSS - Frameworks verwendet wie Bootstrap, Foundation, Materializeusw. Das wichtigste UI - Frameworks begünstigt scssüber sassstandardmäßig - Angular, Reaktion, Vue. Alle Tutorials oder Demos werden im Allgemeinen scsszB create-react-app facebook.github.io/create-react-app/docs/…
Drenai
@fishbone nicht ganz wahr, wenn Sie einen anständigen Code-Editor verwenden, kann es kopierte Stile von Browsern verarbeiten und schreibt sich selbst in Einzug
Miro Krsjak
617

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.

Chriseppstein
quelle
55
Entschuldigung? Habe ich das richtig gelesen? Kann Sass tatsächlich weniger Dateien korrekt importieren? Gibt es Synergien zwischen Mixins / Variablen?
Pilau
8
Die Ähnlichkeit mit Standard-CSS kann in Gruppenumgebungen wichtiger sein, in denen es Personen gibt, die Ihren Code lesen müssen, jedoch nur gelegentlich, und die keine Zeit / kein Interesse haben, eine völlig neue Syntax zu erlernen.
C Roald
5
Bedeutet die "Benutzeroberfläche" die "Sprache"?
Djechlin
@djechlin - Ja, meine Interpretation von "UI" hier wäre die programmiererseitige Syntax der Datei. ZB Semikolons oder nicht usw.
Orion Elenzil
10
Sollte "UI" in der Antwort durch einen allgemeineren Begriff ersetzt werden, wie @orionelenzil vorgeschlagen hat?
Michael Freidgeim
382

Die Sass- .sassDatei unterscheidet sich optisch von der .scssDatei, z

Example.sass - sass ist die ältere Syntax

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css ist die neue Syntax ab Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Jedes gültige CSS-Dokument kann einfach durch Ändern der Erweiterung von .cssin in Sassy CSS (SCSS) konvertiert werden .scss.

Anthuan Vásquez
quelle
@ Novocaine +1, ich stimme zu. Als C ++ - Programmierer bevorzuge ich die Klammern und Semikolons. Übrigens, ich habe eine Frage, ist die Umstellung von .scssauf .cssdie gleiche wie .cssauf .scss?
JW.ZG
1
Dies ist mehr, was mir
wichtig ist,
9
@ JW.ZG, Es ist keine Konvertierung, native ist .csseinfach gültig .scss. Sobald Sie scss-spezifischen Code hinzufügen, wird das Ändern des Dateinamens als ungültige CSS-Datei angezeigt. cssist ein Quadrat und scssist ein Rechteck. Alle Quadrate sind Rechtecke, aber nicht alle Rechtecke sind Quadrate.
Grant
145

Sass ( Syntactically Awesome StyleSheets ) hat zwei Syntaxen:

  • eine neuere: SCSS ( Sassy CSS )
  • und eine ältere, originale: Einrückungssyntax, die das ursprüngliche Sass ist und auch Sass genannt wird .

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 {}

  • Verwendet Semikolons ;
  • Zuweisungszeichen ist :
  • Um ein Mixin zu erstellen , wird die @mixinDirektive verwendet
  • Um mixin zu verwenden, steht davor die @includeDirektive
  • Dateien haben die Erweiterung .scss .

Original Sass :

  • Die Syntax ähnelt Ruby
  • Keine Zahnspange
  • Keine strikte Einrückung
  • Keine Semikolons
  • Zuweisungszeichen ist =statt:
  • Um ein Mixin zu erstellen, wird das =Zeichen verwendet
  • Um mixin zu verwenden, steht davor das +Zeichen
  • Dateien haben die Erweiterung .sass .

Einige 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 :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Die Sass- und SCSS-Dokumentation

simhumileco
quelle
14
Seltsam, dass eine so klare und prägnante Antwort weniger Stimmen hat als andere. Ich habe viele Quellen durchgesehen, um zu verstehen, was die Unterschiede zwischen Sass und Scss sind, und schließlich festgestellt, dass dies mich sofort erleuchtet. Gute Arbeit, bis auf ein paar Rechtschreib- / Grammatikfehler.
tnkh
3
@ TonyNg danke. Ich bin froh, dass ich dir helfen konnte. In Bezug auf die Punkte ist es so sicher, weil ich sehr spät geantwortet habe - ungefähr 6 Jahre nachdem ich Fragen gestellt hatte. Fühlen Sie sich frei, mich zu korrigieren, wo ich Rechtschreib- oder Grammatikfehler gemacht habe.
Simhumileco
3
Fügen Sie ein einfaches Beispiel hinzu, um die unterschiedliche Syntax zu zeigen, und diese Antwort wäre perfekt.
Hogan
3
Saubere Antwort, beeindruckend
Hidayt Rahman
3
Die gute Antwort ist dies!
Mohammad Afrashteh
80

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

  • sauberer - wenn Sie aus Python, Ruby (Sie können sogar Requisiten mit symbolähnlicher Syntax schreiben) oder sogar der CoffeeScript-Welt kommen, ist dies für Sie eine Selbstverständlichkeit - das Schreiben von Mixins, Funktionen und allgemein wiederverwendbaren Inhalten .sassist viel einfacher 'und lesbar als in .scss(subjektiv).

SASS cons

  • Whitespace-sensitiv (subjektiv), es macht mir in anderen Sprachen nichts aus, aber hier in CSS stört es mich nur (Probleme: Kopieren, Tab gegen Space War usw.).
  • Keine Inline-Regeln (das war für mich ein body color: redSpielbruch ), du kannst nicht so machen wie in .scssbody {color: red}
  • Importieren von anderen Anbietern, Kopieren von Vanille-CSS-Snippets - nicht unmöglich, aber nach einiger Zeit sehr langweilig. Die Lösung besteht darin, entweder .scssDateien (neben .sassDateien) 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 .sassCode zu schreiben , der nach .scssMöglichkeit tatsächlich in CSS kompiliert wird (dh Visual Studio unterstützt dies nicht, .sassaber 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 .scssvs .sassSyntax Vergleich:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover
Tropfen
quelle
4
@cimmanon Es bietet Vor- und Nachteile, klar formuliert. Das ist der Unterschied zwischen dieser und anderen Antworten. Ich habe mich dafür ausgesprochen, mich aus dem roten Bereich zurückzuziehen. Ich fand es nützlich, obwohl es das übliche Venn-Diagramm der Antwortüberlappung hat, das jeder andere SO-Beitrag hat. Dies könnte für jemanden nützlicher sein, der nur die Wahl auf den beiden Pfaden trifft. Ich denke auch, dass es ein bisschen besser ist als die akzeptierte Antwort, weil es tatsächlich den Unterschied der Sprache zeigt, anstatt nur zu sagen "Sass ist anders, weil es nicht SCSS ist", was für mich nutzlos ist. Ich könnte auf den persönlichen Gebrauch verzichten, aber immer noch :)
Coblr
61

Von der Homepage der Sprache

Sass hat zwei Syntaxen. Die neue Hauptsyntax (ab Sass 3) heißt „SCSS“ (für „Sassy CSS“) und ist eine Obermenge der CSS3-Syntax. Dies bedeutet, dass jedes gültige CSS3-Stylesheet auch ein gültiges SCSS ist. SCSS-Dateien verwenden die Erweiterung .scss.

Die zweite, ältere Syntax wird als eingerückte Syntax (oder einfach als „Sass“) bezeichnet. Inspiriert von Hamls Knappheit ist es für Leute gedacht, die Prägnanz gegenüber Ähnlichkeit mit CSS bevorzugen. Anstelle von Klammern und Semikolons wird der Einzug von Zeilen verwendet, um Blöcke anzugeben. Obwohl dies nicht mehr die primäre Syntax ist, wird die eingerückte Syntax weiterhin unterstützt. Dateien in der eingerückten Syntax verwenden die Erweiterung .sass.

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.

Mixer
quelle
22

Der grundlegende Unterschied ist die Syntax. Während SASS eine lose Syntax mit Leerzeichen und keinen Semikolons hat, ähnelt das SCSS eher dem CSS.

designerNProgrammer
quelle
21

SASS steht für Syntactically Awesome StyleSheets. Es ist eine Erweiterung von CSS, die der Basissprache Kraft und Eleganz verleiht. SASS wurde mit einigen Chages neu als SCSS bezeichnet, aber der alte SASS ist auch da. Bevor Sie SCSS oder SASS verwenden, beachten Sie bitte den folgenden Unterschied.

Geben Sie hier die Bildbeschreibung ein

Ein Beispiel für eine SCSS- und SASS-Syntax:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

CSS nach der Kompilierung ausgeben (für beide gleich)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Weitere Anleitungen finden Sie auf der offiziellen Website .

Srikrushna
quelle
16

Sass war der erste und die Syntax ist etwas anders. Zum Beispiel einschließlich eines Mixins:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignoriert geschweifte Klammern und Semikolons und lag auf der Verschachtelung, was ich nützlicher fand.

user3522940
quelle
13

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.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

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;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Sie können dem folgenden CSS entnehmen, dass der SCSS-Stil dem normalen CSS viel ähnlicher ist als der ältere SASS-Ansatz.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

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.

Shailesh Vikram Singh
quelle
12

Original sassist Ruby-Syntax-ähnlich, ähnlich wie Ruby, Jade etc ...

In diesen Syntaxen verwenden wir keine {}Leerzeichen, stattdessen verwenden wir Leerzeichen, auch keine Verwendung von ;...

In scssSyntax sind eher wie CSS, aber mit mehr Optionen wie: Verschachteln, Deklarieren, etc., ähnlich lessund andere Vorverarbeitung CSS...

Sie haben im Grunde das Gleiche, aber ich habe paar Zeilen jeweils die Syntax Unterschied zu sehen, Blick auf die {}, ;, und spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}
Alireza
quelle
6

Die kompakte Antwort:

SCSS bezieht sich auf die Hauptsyntax, die vom Sass CSS-Vorprozessor unterstützt wird .

  • Dateien, die mit enden .scss stellen die von Sass unterstützte Standardsyntax dar. SCSS ist eine Obermenge von CSS.
  • Dateien, die mit enden, .sassstellen die "ältere" Syntax dar, die von Sass mit Ursprung in der Ruby-Welt unterstützt wird.
matthias
quelle
4

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/

ShashiWDN
quelle