sass
SCSS versus Sass

Belangrijkste verschillen

Hoewel mensen vaak Sass zeggen als de naam van deze CSS-preprocessor, bedoelen ze vaak de SCSS -syntax. Sass gebruikt de .sass bestandsextensie, terwijl SCSS - Sass de .scss extensie gebruikt. Ze worden beide "Sass" genoemd.

Over het algemeen gesproken wordt de SCSS -syntax vaker gebruikt. SCSS ziet eruit als gewone CSS met meer mogelijkheden, terwijl Sass er heel anders uitziet dan gewone CSS. Beide syntaxis hebben dezelfde mogelijkheden.

Syntaxis

De belangrijkste verschillen zijn dat Sass geen accolades of puntkomma's gebruikt, waar SCSS doet. Sass is ook witruimtegevoelig, wat betekent dat je correct moet inspringen. In SCSS kunt u uw regels opmaken en laten inspringen zoals u wilt.

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

Na compilatie zullen beide dezelfde volgende CSS produceren:

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

mixins

Sass meestal de meer "luie" syntaxis. Niets illustreert dit mooier dan hoe je mixins definieert en opneemt.

Een mixin definiëren

= is hoe u een mixin definieert 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

Inclusief een mixin

+ is hoe u @include in Sass , @include in SCSS .

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

// Sass
.element
  +size(20rem)

Kaarten

Als het op kaarten SCSS is SCSS meestal de gemakkelijkere syntaxis. Omdat Sass op inspringen is gebaseerd, moeten uw kaarten op één regel worden opgeslagen.

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

Omdat u uw code op meerdere regels kunt formatteren met SCSS , kunt u uw kaarten formatteren zodat deze beter leesbaar zijn.

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

Comments

Opmerkingen in Sass versus Scss zijn grotendeels vergelijkbaar, behalve als het om meerdere lijnen gaat. SASS multilijnen zijn gevoelig voor inspringen, terwijl SCSS afhankelijk is van terminators voor opmerkingen.

Enkele regel commentaar

style.scss

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

style.sass

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

Meerregelig commentaar

style.scss

Initiator: /*

Terminator: */

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

Hiermee stijl je h1 elementen in de kleur rood .

style.sass

Nu heeft SASS twee initiatiefnemers, maar geen respectieve terminators. Opmerkingen over SASS in SASS zijn gevoelig voor inspringingsniveaus .

Initiatiefnemers: // en /*

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

Hiermee stijl je h1 elementen in de kleur rood .

Hetzelfde kan worden gedaan met de /* Initiator:

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

Dus daar heb je het! De belangrijkste verschillen tussen opmerkingen in SCSS en SASS !

Vergelijking tussen SCSS & SASS

• SCSS syntaxis lijkt meer op een CSS syntaxis, maar SASS syntaxis is een beetje anders dan SCSS maar beide produceren exact dezelfde CSS code.
• In SASS beëindigen we de stijleigenschappen niet met puntkomma ( ; ) maar in SCSS beëindigen we de stijleigenschappen met ( ; ).
• In SCSS hebben we paranthesis {} gebruikt om de stijleigenschappen te sluiten, maar in SASS we geen paranthesis .
• Indentation is erg belangrijk in SASS . Het definieert de geneste eigenschappen in de class of id van het element.
• In scss kunnen we meerdere variabelen in één regel definiëren, maar in SASS we dat niet.

voor lussyntaxis

Met de release van versie 3.3 en plus kreeg de syntaxis van @if en andere voorwaarden hetzelfde. we kunnen nu uitdrukkingen gebruiken met niet alleen scss maar ook sass .

sass syntaxis

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

Gecompileerd tot

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

scss syntaxis

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

gecompileerd om

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