Was ist der Unterschied zwischen sass und scss?

Sass und scss sind zwei verschiedene Syntaxen, die vom CSS-Präprozessor Sass bereitgestellt werden. Beide sind ähnlich und tun dasselbe, sind jedoch in unterschiedlichen Stilen geschrieben. SCSS ist das neueste und gilt als besser als Sass.

Lernen wir zunächst die beiden unterschiedlichen Syntaxen sass und scss kennen, die vom CSS-Präprozessor Sass bereitgestellt werden.

sass, auch bekannt als Einrückungssyntax, ist eine Programmiersprache ähnlich wie Ruby.

Es stammt von einem anderen Präprozessor namens Haml, der von der Einfachheit von Haml inspiriert ist, und wurde von Ruby-Entwicklern entworfen und geschrieben. Daher verwenden Sass-Stylesheets eine Ruby-ähnliche Syntax. Nein

Sass ist für diejenigen, die Einfachheit ähnlich wie CSS bevorzugen. Es verwendet die Einrückung der Zeile, um Blöcke anstelle von Klammern und Semikolons anzugeben, sodass es Klammern, keine Semikolons und eine strikte Einrückung gibt. Dateien in der Sass-Syntax verwenden die Erweiterung .sass.

Beispiel:

// Variable
!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)

Wie wir sehen können, ist dies eine ziemliche Veränderung im Vergleich zu normalem CSS! Das Variablenflag ist „!“, nicht „$“, und das Zuweisungssymbol ist „=", nicht „:", was etwas seltsam ist!

Aber so sah Sass aus, bevor Version 3.0 im Mai 2010 erschien, woraufhin Sassy CSS eine völlig neue Syntax namens scss einführte. Diese Syntax zielt darauf ab, die Lücke zwischen Sass und CSS zu schließen, indem eine CSS-freundliche Syntax eingeführt wird.

scss, ähnlich der CSS-Syntax, vollständig kompatibel mit CSS-Standards,

// Variable
$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);
}

scss ist definitiv näher an CSS als an sass.

Der Unterschied zwischen scss und sass

Die Syntax von Sass ähnelt Ruby, sie hat keine Klammern Verwendung: Es gibt keine strikte Einrückung, kein Semikolon; das Variablensymbol ist „!“ anstelle von „$“ und das Zuweisungssymbol ist „=" anstelle von „:".

less-Syntax ähnelt CSS und erfordert die Verwendung von geschweiften Klammern und Semikolons; das Variablensymbol ist „$“ und das Zuweisungssymbol ist „:“.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

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!