sass
SCSS vs Sass

Hauptunterschiede

Obwohl die Leute oft Sass als Namen dieses CSS-Präprozessors sagen, meinen sie oft die SCSS Syntax. Sass verwendet die .sass , während SCSS Sass die Erweiterung .scss . Sie werden beide als "Sass" bezeichnet.

Im Allgemeinen wird der SCSS Synthesizer häufiger verwendet. SCSS sieht aus wie normales CSS mit mehr Funktionen, wohingegen Sass sich von normalem CSS unterscheidet. Beide Syntaxen haben die gleichen Fähigkeiten.

Syntax

Die Hauptunterschiede sind, dass Sass keine geschweiften Klammern oder Semikola verwendet, wo SCSS tut. Sass ist auch Whitespace-sensitiv, was bedeutet, dass Sie korrekt eingerückt werden müssen. In SCSS können Sie Ihre Regeln beliebig formatieren und einrücken.

SCSS:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

SASS:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

Nach der Kompilierung erzeugen beide dasselbe CSS:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

Mixins

Sass tendiert dazu, die eher "faule" Syntax zu sein. Nichts veranschaulicht dies schöner als wie Sie Mixins definieren und einbeziehen.

Mixin definieren

= So definieren Sie ein Mixin in Sass , @mixin in SCSS .

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

Einschließlich ein Mixin

+ ist, wie Sie in Sass , @include in SCSS .

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

Karten

Wenn es um Karten geht, ist SCSS normalerweise die einfachere Syntax. Da Sass Einrückungen basiert, müssen Ihre Karten in einer Zeile gespeichert werden.

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

Da Sie Ihren Code mit SCSS formatieren können, können Sie Ihre Karten lesbarer gestalten.

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

Bemerkungen

Kommentare in Sass vs. Scss sind weitgehend ähnlich, außer wenn es sich um Mehrfachzeilen handelt. SASS Mehrfachzeilen sind von Einrückungen abhängig, während SCSS auf Kommentar-Terminatoren beruht.

Einzeiliger Kommentar

style.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

Mehrzeiliger Kommentar

style.scss

Initiator: /*

Terminator: */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

Dadurch werden h1 Elemente mit der Farbe Rot gestaltet .

style.sass

Nun hat SASS zwei Initiatoren, jedoch keine entsprechenden Terminatoren. Mehrzeilige Kommentare in SASS sind empfindlich gegenüber Einrückungsstufen .

Initiatoren: // und /*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Dadurch werden h1 Elemente mit der Farbe Rot gestaltet .

Dasselbe kann mit dem /* -Initiator gemacht werden:

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

So haben Sie es! Die Hauptunterschiede zwischen Kommentaren in SCSS und SASS !

Vergleich zwischen SCSS & SASS

• SCSS Syntax ähnelt eher einer CSS Syntax, aber die SASS Syntax unterscheidet sich ein wenig von SCSS aber beide erzeugen exakt denselben CSS Code.
• In SASS beenden wir die SASS nicht mit Semikolon ( ; ), aber in SCSS beenden wir die Stileigenschaften mit ( ; ).
• In SCSS wir die Stileigenschaften mit Paranthesis {} geschlossen, in SASS jedoch keine paranthesis .
• Indentation ist in SASS sehr wichtig. Es definiert die verschachtelten Eigenschaften in der class oder id des Elements.
• In scss wir mehrere Variablen in einer Zeile definieren, in SASS jedoch nicht.

für die Loop-Syntax

Mit der Veröffentlichung von sass 3.3 und plus wurde die Syntax für @if und andere Bedingungen gleich. Wir können jetzt Ausdrücke nicht nur mit scss, sondern auch mit sass verwenden .

Sass-Syntax

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Zusammengestellt zu

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

SCSS-Syntax

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

kompiliert zu

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}