Articles

Unterschied zwischen .sass und .scss

by admin

Als ich anfing, den Weg der CSS-Präprozessoren zu beschreiten, war ich überwältigt von den verschiedenen Optionen (sass, less, stylus), den Unterschieden in der Syntax und vor allem hatte ich keine Ahnung, wie ich anfangen sollte mit diesem neuen Ansatz zum Schreiben von CSS.

Wenn Sie ein häufiger Benutzer von CodePen.io sie werden feststellen, dass es einige Optionen gibt, wenn es um den Geschmack von CSS geht, den Sie auswählen können.

  • SASS mit Kompass
  • SCSS mit Kompass
  • WENIGER
  • Reguläres altes CSS

Lassen Sie sich nicht von den Optionen SASS und SCSS verwirren, obwohl ich anfangs, .scss ist Sassy CSS und ist die nächste Generation von .sass. Eine Erklärung von der Website

Sass hat zwei Syntaxen. Die am häufigsten verwendete Syntax ist als „SCSS“ (für „Sassy CSS“) bekannt und ist eine Obermenge der CSS3-Syntax. Dies bedeutet, dass jedes gültige CSS3-Stylesheet auch gültiges SCSS ist. SCSS-Dateien verwenden die Erweiterung .scss.

Die zweite, ältere Syntax ist bekannt als die eingerückte Syntax (oder einfach „.sass“). Inspiriert von Hamls Knappheit ist es für Leute gedacht, die Prägnanz der Ähnlichkeit mit CSS vorziehen. Anstelle von Klammern und Semikolons wird der Einzug von Zeilen verwendet, um Blöcke anzugeben. Dateien in der eingerückten Syntax verwenden die Erweiterung .sass.

Erklärung von SASS vs SCSS auf der sass-lang.com webseite

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 ; um die Deklarationen zu trennen. Ich habe sogar alle Deklarationen für .border in einer einzigen Zeile hinzugefügt, um diesen Punkt weiter zu veranschaulichen.

Im Gegensatz dazu muss sich der folgende SASS-Code in verschiedenen Zeilen mit Einrückung befinden und die ; wird nicht verwendet.

/* 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 CSS unten entnehmen, dass der SCSS-Stil dem regulären 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, die meiste Zeit in diesen Tagen, wenn jemand erwähnt, dass sie mit Sass arbeiten, beziehen sie sich auf Authoring in .scss statt der traditionellen .sass Weg.

Vielleicht möchten Sie auch einige hilfreiche @mixins ausprobieren, die Ihnen bei Ihrem responsiven Build helfen.