sass
SCSS vs Sass

Główne różnice

Chociaż ludzie często mówią Sass jako nazwę tego preprocesora CSS, często mają na myśli SCSS -syntax. Sass korzysta z rozszerzenia pliku .sass , a SCSS - Sass korzysta z rozszerzenia .scss . Oba są określane jako „Sass”.

Mówiąc ogólnie, SCSS -syntax jest częściej używany. SCSS wygląda jak zwykły CSS z większymi możliwościami, podczas gdy Sass wygląda zupełnie inaczej niż zwykły CSS. Obie składnie mają te same zdolności.

Składnia

Główne różnice polegają na tym, że Sass nie używa nawiasów klamrowych ani średników, w SCSS . Sass jest również wrażliwy na białe znaki, co oznacza, że musisz poprawnie wciąć. W SCSS możesz dowolnie formatować i SCSS swoje reguły.

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

Po kompilacji oba wygenerują ten sam następujący CSS:

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

Mixiny

Sass jest bardziej „leniwą” składnią. Nic nie ilustruje tego ładniejszego niż sposób definiowania i włączania miksów.

Definiowanie mixinu

= to jak definiujesz mixin w Sass , @mixin w SCSS .

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

W tym mixin

+ to sposób dołączania do Sass , @include w SCSS .

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

// Sass
.element
  +size(20rem)

Mapy

Jeśli chodzi o mapy, zwykle SCSS jest łatwiejszą składnią. Ponieważ Sass jest oparty na wcięciach, twoje mapy muszą być zapisane w jednym wierszu.

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

Ponieważ możesz formatować swój kod na wielu liniach za pomocą SCSS , możesz sformatować swoje mapy, aby były bardziej czytelne.

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

Komentarze

Komentarze w Sass vs. Scss są w dużej mierze podobne, z wyjątkiem sytuacji, gdy dotyczy to wielu linii. SASS są wrażliwe na wcięcia, a SCSS opiera się na terminatorach komentarzy.

Komentarz jednowierszowy

style.scss

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

style.sass

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

Komentarz wieloliniowy

style.scss

Inicjator: /*

Terminator: */

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

Spowoduje to stylizację elementów h1 kolorem czerwonym .

style.sass

Teraz SASS ma dwa inicjatory, ale nie ma odpowiednich terminatorów. Komentarze wieloliniowe w SASS są wrażliwe na poziomy wcięć .

Inicjatory: // i /*

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

Spowoduje to stylizację elementów h1 kolorem czerwonym .

To samo można zrobić z /* Initiator:

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

Więc masz! Główne różnice między komentarzami w SCSS i SASS !

Porównanie SCSS i SASS

• Składnia SCSS przypomina bardziej składnię CSS ale składnia SASS nieco różni się od SCSS ale oba generują dokładnie ten sam kod CSS .
• W SASS nie kończymy właściwości stylu średnikiem ( ; ), ale w SCSS kończymy właściwości stylu za pomocą ( ; ).
• W SCSS użyliśmy SCSS {} do zamknięcia właściwości stylu, ale w SASS nie używamy paranthesis .
• Indentation jest bardzo ważne w SASS . Określi zagnieżdżone właściwości w class lub id elementu.
• W scss możemy zdefiniować wiele zmiennych w jednym wierszu, ale w SASS nie możemy tego zrobić.

dla składni pętli

Wraz z wydaniem wersji sass 3.3 i wersji dodatkowej składnia @if i warunki uległy zmianie. możemy teraz używać wyrażeń z nie tylko scss, ale także sass .

składnia sass

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

Skompilowano do

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

składnia scss

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

skompilowany do

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