sass
SCSS vs Sass

Principales Différences

Bien que les gens disent souvent Sass comme le nom de ce CSS-préprocesseur, ils signifient souvent le SCSS -syntax. Sass utilise l'extension de fichier .sass , tandis que SCSS - Sass utilise l'extension .scss . Ils sont tous deux appelés "Sass".

D'une manière générale, le SCSS -syntax est plus couramment utilisé. SCSS ressemble à un CSS ordinaire avec plus de fonctionnalités, alors que Sass est très différent des CSS classiques. Les deux syntaxes ont les mêmes capacités.

Syntaxe

Les principales différences sont que Sass n'utilise pas de accolades ou de points-virgules, ce que fait SCSS . Sass est également sensible aux espaces, ce qui signifie que vous devez indenter correctement. Dans SCSS , vous pouvez formater et indenter vos règles à votre guise.

SCSS:

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

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

TOUPET:

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

  .child
    float: left
    background: blue

Après la compilation, les deux produiront le même CSS suivant:

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

Mixins

Sass tendance à être la syntaxe la plus "paresseuse". Rien n'illustre mieux ce que vous définissez et incluez les mixins.

Définir un mixin

= Comment vous définissez un mixin dans Sass , @mixin dans SCSS .

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

Y compris un mixin

+ Comment vous inclure dans Sass , @include dans SCSS .

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

// Sass
.element
  +size(20rem)

Plans

En ce qui concerne les cartes, SCSS est généralement la syntaxe la plus simple. Comme Sass est basé sur un retrait, vos cartes doivent être enregistrées sur une seule ligne.

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

Comme vous pouvez formater votre code sur plusieurs lignes avec SCSS , vous pouvez formater vos cartes pour les rendre plus lisibles.

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

commentaires

Les commentaires dans Sass vs Scss sont largement similaires, sauf en ce qui concerne les lignes multiples. SASS lignes multiples SASS sont sensibles à l'indentation, tandis que SCSS s'appuie sur des terminateurs de commentaires.

Commentaire sur une seule ligne

style.scss

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

style.sass

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

Commentaire multi-lignes

style.scss

Initiateur: /*

Terminator: */

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

Cela va h1 éléments h1 avec la couleur rouge .

style.sass

Maintenant, SASS a deux initiateurs, mais pas de terminateurs respectifs. Les commentaires multilignes dans SASS sont sensibles aux niveaux d'indentation .

Initiateurs: // et /*

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

Cela va h1 éléments h1 avec la couleur rouge .

La même chose peut être faite avec l'initiateur /* :

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

Alors voilà! Les principales différences entre les commentaires dans SCSS et SASS !

Comparaison entre SCSS et SASS

• SCSS syntaxe SCSS ressemble plus à une syntaxe CSS mais la syntaxe SASS est un peu différente de SCSS mais les deux produisent exactement le même code CSS .
• Dans SASS nous ne SASS pas les propriétés de style avec un point-virgule ( ; ) mais dans SCSS, nous finissons les propriétés de style avec ( ; ).
• Dans SCSS nous avons utilisé le paranthesis {} pour fermer les propriétés de style, mais dans SASS nous n'utilisons pas de paranthesis .
• Indentation est très importante dans SASS . Il définira les propriétés imbriquées dans la class ou l' id de l'élément.
• En scss nous pouvons définir plusieurs variables sur une seule ligne mais dans SASS nous ne pouvons pas le faire.

pour la syntaxe de la boucle

Avec la sortie de sass 3.3 et plus la version, la syntaxe des conditions @if et else est la même. nous pouvons maintenant utiliser des expressions avec non seulement scss mais aussi sass .

syntaxe sass

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

Compilé pour

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

la syntaxe scss

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

compilé pour

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