sass
SCSS vs Sass

Huvudsakliga skillnader

Även om folk ofta säger Sass som namnet på denna CSS-förbehandlare, menar de ofta SCSS syntax. Sass använder .sass , medan SCSS - Sass använder .scss . De kallas båda "Sass".

Generellt sett är SCSS syntax vanligare. SCSS ser ut som vanligt CSS med fler kapacitet, medan Sass ser ganska annorlunda ut än vanligt CSS. Båda syntaxerna har samma förmågor.

Syntax

De viktigaste skillnaderna är att Sass inte använder lockiga konsoler eller semikolon, där SCSS gör det. Sass är också mellanrumskänsligt, vilket innebär att du måste intrycka korrekt. I SCSS kan du formatera och strecksätta dina regler som du vill.

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

Efter sammanställningen kommer båda att producera samma följande CSS:

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

Mixins

Sass tenderar att vara den mer "lata" syntaxen. Ingenting illustrerar detta trevligare än hur du definierar och inkluderar mixins.

Definiera en mixin

= är hur du definierar en mixin i Sass , @mixin i SCSS .

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

Inklusive en mixin

+ är hur du inkluderar i Sass , @include i SCSS .

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

// Sass
.element
  +size(20rem)

Kartor

När det gäller kartor är SCSS vanligtvis den enklare syntaxen. Eftersom Sass är indragsbaserat måste dina kartor sparas på en rad.

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

Eftersom du kan formatera din kod på flera rader med SCSS , kan du formatera dina kartor så att de är mer läsbara.

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

kommentarer

Kommentarer i Sass kontra Scss är i stort sett lika, förutom när det gäller flera linjer. SASS - SCSS är SCSS medan SCSS förlitar sig på kommentarterminatorer.

Enlinjekommentar

style.scss

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

style.sass

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

Kommentar med flera linjer

style.scss

Initiativtagare: /*

Terminator: */

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

Detta kommer att utforma h1 element med färgen röd .

style.sass

Nu har SASS två initiativtagare, men inga respektive terminatorer. Multiline-kommentarer i SASS är känsliga för indragningsnivåer .

Initiativtagare: // och /*

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

Detta kommer att utforma h1 element med färgen röd .

Detsamma kan göras med /* Initiator:

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

Så där har du det! De viktigaste skillnaderna mellan kommentarerna i SCSS och SASS !

Jämförelse mellan SCSS och SASS

• SCSS syntax liknar mer som en CSS syntax men SASS syntax skiljer sig lite från SCSS men båda producerar exakt samma CSS kod.
• I SASS avslutar vi inte stilegenskaperna med semikolon ( ; ) men i SCSS avslutar vi stilegenskaperna med ( ; ).
• I SCSS använde vi parantes {} att stänga stilegenskaperna men i SASS använder vi inte paranthesis .
• Indentation är mycket viktig i SASS . Det definierar de kapslade egenskaperna i class eller id för elementet.
• I scss vi definiera flera variabler i en rad men i SASS vi inte göra det.

för loop-syntax

Med frisläppandet av sass 3.3 och plus-versionen fick @if och andra villkor syntax samma. Vi kan nu använda uttryck med inte bara scss utan också sass .

sass syntax

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

Sammansatt till

.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; }
}

sammanställd till

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