Was ist der Unterschied zwischen SCSS und Sass?

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.

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.

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.

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

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

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.

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

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.

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 .

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.

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.

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

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.

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/