Frage 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?


1332
2018-04-13 19:23


Ursprung


Antworten:


Sass ist ein CSS-Preprozessor mit Syntaxverbesserungen. Stylesheets in der erweiterten Syntax werden vom Programm verarbeitet und in reguläre CSS-Stylesheets umgewandelt. Sie tun es jedoch nicht Erweitern Sie den CSS-Standard selbst.

Der Hauptgrund dafür ist das Hinzufügen von Features, die CSS schmerzlich fehlen (wie Variablen).

Der Unterschied zwischen SCSS und Sass, dieser Text auf der Sass Dokumentationsseite sollte die Frage beantworten:

Es gibt zwei Syntaxen für Sass. Die erste, die 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 mit den unten beschriebenen Sass-Funktionen verbessert. Dateien, die diese Syntax verwenden, haben die .scss Erweiterung.

Der zweite und ältere Syntax, bekannt als die eingerückte Syntax (oder manchmal einfach "Sass"), bietet eine prägnantere Art des Schreibens von CSS. Es verwendet Einrückung anstelle von Klammern, um die Verschachtelung von Selektoren anzuzeigen, und Zeilenumbrüche anstelle von Semikolons, um Eigenschaften voneinander zu trennen. Dateien, die diese Syntax verwenden, haben die .sass Erweiterung.

All dies funktioniert jedoch nur mit dem Sass Pre-Compiler, der letztendlich CSS erzeugt. Es ist keine Erweiterung des CSS-Standards.


1358
2018-04-13 19:25



Ich bin einer der Entwickler, die geholfen haben, Sass zu erschaffen.

Der Unterschied ist UI. Unter dem textuellen Äußeren sind sie identisch. Deshalb können sich Sass- und Scss-Dateien gegenseitig importieren. Tatsächlich hat Sass vier Syntax-Parser: scss, sass, CSS und weniger. Alle diese konvertieren eine andere Syntax in ein Abstrakter Syntaxbaum welches über das Tool sass-convert in 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.


480
2018-04-20 15:16



Der Sass .sass Datei unterscheidet sich optisch von .scss Datei, z.B.

beispiel.sass

$color: red

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

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

beispiel.scss

$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 in Sassy CSS (SCSS) konvertiert werden .css zu .scss.


264
2017-11-30 03:05



Seine Syntax ist anders, und das ist der Hauptprofi (oder Con, abhängig von Ihrer Perspektive).

Ich werde versuchen, nicht viel von dem zu wiederholen, was andere gesagt haben, du kannst 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 du von Python kommst, Ruby (du kannst sogar Requisiten mit symbolähnlicher Syntax schreiben) oder sogar die CoffeeScript-Welt, wird es sehr natürlich für dich sein - Mixins, Funktionen und generell alle wiederverwendbaren Sachen zu schreiben .sassist viel "einfacher" und lesbarer als in .scss (subjektiv).

SASS Nachteile

  • whitespace sensitive (subjektiv), in anderen Sprachen stört mich das nicht, aber hier in CSS stört es mich (Probleme: Kopieren, Tab vs Space War, etc).
  • keine Inline-Regeln (das war für mich ein Spielbruch), das geht nicht body color: red wie du in .scss kannst body {color: red}
  • Importieren von anderen Vendor-Zeug, Kopieren von Vanille-CSS-Schnipsel - nicht unmöglich, aber nach einiger Zeit sehr langweilig. Die Lösung ist entweder zu haben .scss Dateien (neben .sass Dateien) in Ihrem Projekt oder um sie zu konvertieren .sass.

Abgesehen davon - sie machen die gleiche Arbeit.

Nun, was ich tun möchte, ist Mixins und Variablen in schreiben .sass und Code, der tatsächlich nach CSS kompiliert wird .scss wenn möglich (dh Visual Studio unterstützt keine .sass aber wenn ich an Rails-Projekten arbeite, kombiniere ich normalerweise zwei von ihnen, nicht in einer Datei vonc).

In letzter Zeit denke ich darüber nach zu geben Stift eine Chance (für einen Vollzeit-CSS-Präprozessor), weil Sie damit zwei Syntaxen in einer Datei (neben einigen anderen Funktionen) kombinieren können. Das ist vielleicht keine gute Richtung für ein Team, aber wenn du es alleine aufrechterhältst - es ist in Ordnung. Der Stift ist tatsächlich am flexibelsten, wenn die Syntax in Frage steht.

Und schließlich mixin für .scss vs .sass Syntaxvergleich:

// 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

57
2018-05-13 14:16



Von dem Homepage der Sprache

Sass hat zwei Syntaxen. Die neue Hauptleitung   Syntax (wie von Sass 3) ist bekannt als   "SCSS" (für "Sassy CSS")und ist ein   Obermenge der CSS3-Syntax. Das heisst   dass jedes gültige CSS3 Stylesheet ist   gültiges SCSS. SCSS-Dateien verwenden die   Erweiterung .scss.

Die zweite, ältere Syntax ist bekannt als   die eingerückte Syntax (oder einfach "Sass").   Inspiriert von Hamls Knappheit   bestimmt für Leute, die es bevorzugen   Prägnanz gegenüber Ähnlichkeit mit CSS.   Anstelle von Klammern und Semikolons, es   verwendet den Einzug von Zeilen nach   Blöcke angeben. Obwohl nicht mehr das   primäre Syntax, die eingerückte Syntax   wird weiterhin unterstützt werden. Dateien   In der eingerückten Syntax verwenden Sie die   Erweiterung .sass.

SASS ist ein interpretiert Sprache, die CSS ausspuckt. Die Struktur von Sass sieht aus wie CSS (remote), aber es scheint mir, dass die Beschreibung ein bisschen irreführend ist; es ist nicht ein 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 es maskiert sie mit einfachem Code.


45
2018-04-13 19:27



Sass (Syntaktisch geniale StyleSheets) haben zwei Syntaxen:

  • ein neueres: SCSS (Sassy CSS)
  • und eine ältere, original: Einrückungssyntax, die das Original ist Sass und wird auch genannt Sass.

Also sind sie beide Teil von Sass Präprozessor mit zwei verschiedenen möglichen Syntaxen.

Die wichtigsten Unterschiede zwischen SCSS und ursprünglich Sass:

SCSS:

  • Es Syntax ähnelt CSS.
  • Verwenden Sie Klammern {}.
  • Verwenden Sie Semikolons ;.
  • Variable Anmeldung SCSS ist $.
  • Anmeldung zur Anmeldung SCSS ist :.
  • Dateien, die diese Syntax verwenden, haben die .scss Erweiterung.

Original Sass:

  • Es Syntax ähnelt Rubin.
  • Hier keine Verwendung von Klammern.
  • Keine strenge Einrückung.
  • Keine Semikolons.
  • Variable Anmeldung Sass ist ! Anstatt von $.
  • Zuordnung anmelden Sass ist = Anstatt von :.
  • Dateien, die diese Syntax verwenden, haben die .sass Erweiterung.

Dies sind zwei verfügbare Syntaxen für Sass.

Manche bevorzugen Sass, die ursprüngliche Syntax - während andere bevorzugen SCSS. So oder so, aber es ist es wert, dies zu beachten Sass eingerückte Syntax wurde nicht und wird nie veraltet sein.

Conversions mit Sass-konvertieren:

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

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

SASS-REFERENZ


37
2018-04-10 11:16



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


18
2018-05-06 10:36



Original sass ist Rubin Syntax-ähnlich, ähnlich wie Rubin, Jade etc ...

In diesen Syntaxen verwenden wir nicht {}Stattdessen gehen wir mit Leerzeichen, auch keine Verwendung von ;...

Im scss Syntaxen sind mehr wie CSS, aber mit mehr Optionen wie: Verschachtelung, Deklaration, etc, ähnlich wie less und andere Vorverarbeitung CSS ...

Sie machen im Grunde dasselbe, aber ich habe ein paar Zeilen von jedem gesetzt, um den Syntaxunterschied zu sehen, schau dir die an {}, ;, und spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

9
2017-07-02 04:51