Quelle est la différence entre SCSS et Sass?

D'après ce que j'ai lu, Sass est un langage qui rend CSS plus puissant avec un support variable et mathématique.

Quelle est la différence avec SCSS? Est-ce censé être la même langue? Similaire? Différent?

Sass est un pré-processeur CSS avec des avancées de syntaxe. Les feuilles de style dans la syntaxe avancée sont traitées par le programme et transformées en feuilles de style CSS régulières. Cependant, ils n'étendent pas la norme CSS elle-même.

Les variables CSS sont prises en charge et peuvent être utilisées, mais pas aussi bien que les variables de pré-processeur.

Pour la différence entre SCSS et Sass, ce texte sur la page de documentation Sass devrait répondre à la question:

Il existe deux syntaxes disponibles pour Sass. Le premier, appelé SCSS (Sassy CSS) et utilisé tout au long de cette référence, est une extension de la syntaxe de CSS. Cela signifie que chaque feuille de style CSS valide est un fichier SCSS valide ayant la même signification. Cette syntaxe est améliorée avec les fonctionnalités Sass décrites ci-dessous. Les fichiers utilisant cette syntaxe ont l' extension .scss .

La seconde syntaxe et plus ancienne , connue sous le nom de syntaxe en retrait (ou parfois simplement «Sass»), fournit une manière plus concise d'écrire du CSS. Il utilise une indentation plutôt que des crochets pour indiquer l'imbrication des sélecteurs et des sauts de ligne plutôt que des points-virgules pour séparer les propriétés. Les fichiers utilisant cette syntaxe ont l' extension .sass .

Cependant, tout cela ne fonctionne qu'avec le précompilateur Sass qui crée finalement CSS. Ce n'est pas une extension de la norme CSS elle-même.

Je fais partie des développeurs qui ont aidé à créer Sass.

La différence est l'interface utilisateur. Sous l'extérieur textuel, ils sont identiques. C'est pourquoi les fichiers sass et scss peuvent s'importer. En fait, Sass a quatre analyseurs syntaxiques: scss, sass, CSS et moins. Tous ces éléments convertissent une syntaxe différente en une arborescence de syntaxe abstraite qui est ensuite traitée en sortie CSS ou même dans l'un des autres formats via l'outil sass-convert.

Utilisez la syntaxe que vous préférez, les deux sont entièrement pris en charge et vous pouvez changer entre eux plus tard si vous changez d'avis.

Le .sassfichier Sass est visuellement différent du .scssfichier, par exemple

Example.sass - sass est l'ancienne syntaxe

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css est la nouvelle syntaxe de Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Tout document CSS valide peut être converti en Sassy CSS (SCSS) simplement en changeant l'extension de .cssen .scss.

Sass ( Syntactically Awesome StyleSheets ) a deux syntaxes:

• un plus récent: SCSS ( Sassy CSS )
• et une syntaxe plus ancienne et originale: indent, qui est le Sass d' origine et est également appelée Sass .

Ils font donc tous deux partie du préprocesseur Sass avec deux syntaxes possibles différentes.

La différence la plus importante entre SCSS et Sass d' origine :

SCSS :

• La syntaxe est similaire à CSS (à tel point que chaque CSS3 valide régulier est également un SCSS valide , mais la relation dans l'autre sens ne se produit évidemment pas)

• Utilise des accolades {}

• Utilise des points-virgules ;
• Le signe d'affectation est :
• Pour créer un mixin il utilise la @mixindirective
• Pour utiliser le mixin il le précède avec la @includedirective
• Les fichiers ont l' extension .scss .

Sass d' origine :

• La syntaxe est similaire à Ruby
• Aucun appareil dentaire
• Pas d'indentation stricte
• Pas de point-virgule
• Le signe d'affectation est =au lieu de:
• Pour créer un mixin il utilise le =signe
• Pour utiliser le mixin il le précède avec le +signe
• Les fichiers ont l' extension .sass .

Certains préfèrent Sass , la syntaxe d'origine - tandis que d'autres préfèrent SCSS . Quoi qu'il en soit, mais il convient de noter que la syntaxe en retrait de Sass n'a pas été et ne sera jamais déconseillée .

Conversions avec sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

La documentation Sass et SCSS

Sa syntaxe est différente, et c'est le principal avantage (ou inconvénient, selon votre point de vue).

J'essaierai de ne pas répéter une grande partie de ce que les autres ont dit, vous pouvez facilement le rechercher sur Google, mais à la place, j'aimerais dire quelques choses de mon expérience en utilisant les deux, parfois même dans le même projet.

SASS pro

• plus propre - si vous venez de Python, Ruby (vous pouvez même écrire des accessoires avec une syntaxe de type symbole) ou même du monde CoffeeScript, cela vous viendra très naturellement - écrire des mixins, des fonctions et généralement tout ce qui .sassest réutilisable est beaucoup plus facile »et plus lisible qu'en .scss(subjectif).

Contre SASS

• sensible aux espaces (subjectif), ça ne me dérange pas dans d'autres langues mais ici en CSS ça me dérange (problèmes: copie, tabulation vs guerre spatiale, etc.).
• pas de règles en ligne (ce fut une rupture de jeu pour moi), vous ne pouvez pas faire body color: redcomme vous le pouvez dans .scssbody {color: red}
• importer d'autres trucs de fournisseurs, copier des extraits CSS vanilla - pas impossible mais très ennuyeux après un certain temps. La solution consiste à avoir des .scssfichiers (avec des .sassfichiers) dans votre projet ou à les convertir .sass.

A part cela - ils font le même travail.

Maintenant, ce que j'aime faire, c'est d'écrire des mixins et des variables dans .sasset du code qui sera effectivement compilé en CSS .scsssi possible (c'est-à-dire que Visual studio ne prend pas en charge, .sassmais chaque fois que je travaille sur des projets Rails, j'en combine généralement deux, pas dans un fichier ofc).

Dernièrement, j'envisage de donner une chance à Stylus (pour un préprocesseur CSS à temps plein) car il vous permet de combiner deux syntaxes dans un fichier (parmi d'autres fonctionnalités). Ce n'est peut-être pas une bonne direction à prendre pour une équipe, mais lorsque vous la maintenez seule - c'est ok. Le stylet est en fait plus flexible lorsque la syntaxe est en question.

Et enfin mixin pour la comparaison de la syntaxe .scssvs .sass:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Depuis la page d'accueil de la langue

Sass a deux syntaxes. La nouvelle syntaxe principale (à partir de Sass 3) est connue sous le nom de «SCSS» (pour «Sassy CSS») et est un sur-ensemble de la syntaxe de CSS3. Cela signifie que chaque feuille de style CSS3 valide est également SCSS valide. Les fichiers SCSS utilisent l'extension .scss.

La seconde syntaxe plus ancienne est connue sous le nom de syntaxe en retrait (ou simplement «Sass»). Inspiré par la concision de Haml, il est destiné aux personnes qui préfèrent la concision à la similitude avec CSS. Au lieu de crochets et de points-virgules, il utilise l'indentation des lignes pour spécifier les blocs. Bien qu'elle ne soit plus la syntaxe principale, la syntaxe en retrait continuera à être prise en charge. Les fichiers dans la syntaxe en retrait utilisent l'extension .sass.

SASS est un langage interprété qui crache CSS. La structure de Sass ressemble à CSS (à distance), mais il me semble que la description est un peu trompeuse; ce n'est pas un remplacement pour CSS ou une extension. C'est un interpréteur qui crache du CSS à la fin, donc Sass a toujours les limites du CSS normal, mais il les masque avec du code simple.

La différence fondamentale est la syntaxe. Alors que SASS a une syntaxe lâche avec des espaces blancs et aucun point-virgule, le SCSS ressemble plus à CSS.

SASS signifie Syntactically Awesome StyleSheets. C'est une extension de CSS qui ajoute puissance et élégance au langage de base. SASS est nouvellement nommé SCSS avec quelques chages, mais l'ancien SASS est également là. Avant d'utiliser SCSS ou SASS, veuillez voir la différence ci-dessous.

Un exemple de syntaxe SCSS et SASS:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

TOUPET

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Sortie CSS après compilation (idem pour les deux)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Pour plus de guide, vous pouvez voir le site officiel .

Sass était le premier, et la syntaxe est un peu différente. Par exemple, y compris un mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignore les accolades et les points-virgules et se couche sur l'imbrication, ce que j'ai trouvé plus utile.

La différence entre l'article SASS et SCSS explique la différence dans les détails. Ne soyez pas confus par les options SASS et SCSS, même si je l'étais aussi au départ, .scss est Sassy CSS et est la prochaine génération de .sass.

Si cela n'a pas de sens, vous pouvez voir la différence de code ci-dessous.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

Dans le code ci-dessus, nous utilisons; pour séparer les déclarations. J'ai même ajouté toutes les déclarations pour .border sur une seule ligne pour illustrer davantage ce point. En revanche, le code SASS ci-dessous doit être sur différentes lignes avec indentation et il n'y a pas d'utilisation du;.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Vous pouvez voir dans le CSS ci-dessous que le style SCSS est beaucoup plus similaire au CSS ordinaire que l'ancienne approche SASS.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Je pense que la plupart du temps ces jours-ci, si quelqu'un mentionne qu'il travaille avec Sass, il fait référence à la création en .scss plutôt qu'à la manière traditionnelle .sass.

L'original sassressemble à la syntaxe ruby, similaire à ruby, jade etc ...

Dans ces syntaxes, nous n'utilisons pas {}, au lieu de cela, nous allons avec des espaces blancs, également pas d'utilisation de ;...

Dans les scsssyntaxes sont plus semblables CSS, mais avec plus d'options comme: imbrication, déclaration, etc., similaires à lesset autres prétraitements CSS...

Ils font essentiellement la même chose, mais je mis deux lignes de chacun pour voir la différence de syntaxe, regardez la {}, ;et spaces:

TOUPET:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

La réponse compacte:

SCSS fait référence à la syntaxe principale prise en charge par le pré-processeur CSS Sass .

• Les fichiers se terminant par .scssreprésentent la syntaxe standard prise en charge par Sass. SCSS est un sur-ensemble de CSS.
• Les fichiers se terminant par .sassreprésentent la "plus ancienne" syntaxe prise en charge par Sass provenant du monde Ruby.

SASS est Syntactically Awesome Style Sheets et est une extension de CSS qui fournit les fonctionnalités de règles imbriquées, d'héritage, Mixins tandis que SCSS est Sassy Cascaded Style Sheets qui est similaire à celle de CSS et comble les lacunes et les incompatibilités entre CSS et SASS. Il était sous licence MIT. Cet article a plus sur les différences: https://www.educba.com/sass-vs-scss/