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 standard. Cependant, ils n’élargissent pas le standard CSS lui-même.

La principale raison en est l’ajout de fonctionnalités qui font cruellement défaut à CSS (comme les variables).

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

Il existe deux syntaxes disponibles pour Sass. Le premier, appelé SCSS (Sassy CSS) et utilisé dans 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 deuxième et l’ ancienne syntaxe , connue sous le nom de syntaxe en retrait (ou parfois simplement «Sass»), fournit une manière plus concise d’écrire des CSS. Il utilise l’indentation plutôt que des parenthèses pour indiquer l’imbrication des sélecteurs et les nouvelles lignes plutôt que les 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 du standard CSS lui-même.

Je suis l’un 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 mutuellement. En fait, Sass a quatre parsingurs de syntaxe: scss, sass, CSS et moins. Tous convertissent une syntaxe différente en un arbre de syntaxe abstraite qui est ensuite traité en sortie CSS ou même sur l’un des autres formats via l’outil sass-convert.

Utilisez la syntaxe qui vous convient le mieux, les deux sont entièrement supportés et vous pourrez les changer plus tard si vous changez d’avis.

Le fichier Sass .sass est visuellement différent du fichier .scss , 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 à partir 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 CSS Sassy (SCSS) simplement en modifiant l’extension de .scss à .scss .

Sa syntaxe est différente et c’est le principal pro (ou con, selon votre perspective).

Je vais essayer de ne pas répéter beaucoup de ce que les autres ont dit, vous pouvez facilement faire une recherche sur Google, mais au lieu de cela, je voudrais 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 similaire à un symbole) ou même le monde CoffeeScript, cela vous .sass très naturel – écrire des mixins, des fonctions et généralement des choses réutilisables dans .sass “facile” et lisible que dans .scss (subjectif).

SASS contre

  • Les espaces sensibles (subjectifs), ça ne me dérange pas dans les autres langages mais ici en CSS ça me dérange (problèmes: copie, tabulation vs guerre de l’espace, etc.).
  • pas de règles en ligne (c’était un jeu pour moi), vous ne pouvez pas faire body color: red comme vous le pouvez dans le body {color: red} .scss body {color: red}
  • importation d’autres trucs de fournisseurs, copie d’extraits de code CSS vanilla – pas impossible mais très ennuyeux après un certain temps. La solution consiste à avoir des fichiers .scss (avec les fichiers .sass ) dans votre projet ou à les convertir en .sass .

Autre que cela – ils font le même travail.

Maintenant, ce que j’aime faire, c’est écrire des mixins et des variables dans .sass et du code qui comstackront en CSS en .scss si possible (c.-à-d. .scss Visual Studio ne prend pas en charge combinez-en 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 seul fichier (parmi d’autres fonctionnalités). Ce n’est peut-être pas la bonne direction à prendre pour une équipe, mais quand vous la maintenez seule, ça va. Le stylet est réellement plus flexible lorsque la syntaxe est en question.

Et enfin, mixin pour .scss vs .sass comparaison de syntaxe:

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

De 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 valide. Les fichiers SCSS utilisent l’extension .scss.

La deuxième syntaxe, plus ancienne, est connue sous le nom de syntaxe en retrait (ou simplement «Sass»). Inspiré par la complexité de Haml, il est destiné aux personnes qui préfèrent la concision à la similarité avec les CSS. Au lieu de crochets et de points-virgules, il utilise l’indentation des lignes pour spécifier des blocs. Bien que n’étant 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 des 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 les CSS à la fin, donc Sass a toujours les limites des CSS normaux, mais il les masque avec du code simple.

Sass ( Syntactically Awesome StyleSheets ) ont deux syntaxes:

  • un plus récent: SCSS ( Sassy CSS )
  • et une ancienne, originale: syntaxe d’indentation, qui est l’original Sass et s’appelle aussi Sass .

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

Les différences les plus importantes entre SCSS et Sass d’ origine:

SCSS :

  • Sa syntaxe est similaire à celle de CSS .
  • Utilisez des accolades {} .
  • Utilisez des points-virgules ; .
  • Le signe variable dans SCSS est $ .
  • Un signe d’atsortingbution dans SCSS est:.
  • Les fichiers utilisant cette syntaxe ont l’extension .scss .

Original Sass :

  • Sa syntaxe est similaire à Ruby .
  • Ici pas d’utilisations d’accolades.
  • Pas d’indentation ssortingcte.
  • Pas de point-virgule.
  • Le signe variable dans Sass est ! au lieu de $ .
  • Le signe d’affectation dans Sass est = au lieu de :
  • Les fichiers utilisant cette syntaxe ont l’extension .sass .

Ce sont deux syntaxes disponibles pour Sass .

Certains préfèrent Sass , la syntaxe originale, tandis que d’autres préfèrent le SCSS . Quoi qu’il en soit, 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 

RÉFÉRENCE SASS

La différence fondamentale est la syntaxe. Alors que SASS a une syntaxe lâche avec des espaces blancs et sans points-virgules, le SCSS ressemble davantage à CSS.

sass origine est semblable à la syntaxe rbuy, similaire au rbuy, jade etc …

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

En scss syntaxes scss plus à CSS , mais avec plus d’options comme: imbriquer, déclarer, etc., similaire à less et autres CSS prétraitement …

Ils font fondamentalement la même chose, mais j’ai mis quelques lignes de chacun pour voir la différence de syntaxe, regardez le {} ; et spaces :

TOUPET:

 $width: 100px $color: green div width: $width background-color: $color 

SCSS:

 $width: 100px; $color: green; div { width: $width; background-color: $color; } 

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 repose sur l’imbrication, que j’ai trouvé plus utile.

La différence entre l’article SASS et SCSS explique la différence de détails. Ne soyez pas confus par les options SASS et SCSS, même si au départ, .scss s’appelle Sassy CSS et constitue 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; séparer les déclarations. J’ai même ajouté toutes les déclarations de .border sur une seule ligne pour illustrer ce point. En revanche, le code SASS ci-dessous doit être sur des lignes différentes avec indentation et il n’y a pas d’utilisation de;

 /* 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 style CSS standard 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.

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

entrer la description de l'image ici

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 la compilation (identique 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 référence site officiel

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 .scss représentent la syntaxe standard prise en charge par Sass. SCSS est un sur-ensemble de CSS.
  • Les fichiers se terminant par .sass représentent la syntaxe “plus ancienne” prise en charge par Sass dans le monde Ruby.