Articles

Différence entre.sass et.scss

by admin

Quand j’ai commencé sur le chemin des préprocesseurs CSS, j’étais submergé par les différentes options (sass, less, stylus), les différences de syntaxe, et surtout je ne savais pas comment je devais commencer avec cette nouvelle approche de l’écriture CSS.

Si vous êtes un utilisateur fréquent de CodePen.io vous remarquerez qu’il existe quelques options en ce qui concerne la saveur du CSS que vous pouvez choisir.

  • SASS avec Boussole
  • SCSS avec Boussole
  • MOINS
  • Regular ol’ CSS

Ne soyez pas confus par les options SASS et SCSS, bien que j’étais au départ,.scss est un CSS impertinent et est la prochaine génération de.Sass. Une explication du site Web

Sass a deux syntaxes. La syntaxe la plus couramment utilisée est connue sous le nom de « SCSS” (pour « CSS impertinent”), et est un surensemble de la syntaxe de CSS3. Cela signifie que chaque feuille de style CSS3 valide est également un SCSS valide. Les fichiers SCSS utilisent l’extension.scs.

La seconde syntaxe, plus ancienne, est connue sous le nom de syntaxe en retrait (ou simplement « .Sass”). Inspiré par la lacune 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 des blocs. Les fichiers de la syntaxe en retrait utilisent l’extension.Sass.

Explication de SASS vs SCSS sur le sass-lang.com site web

Si cela n’avait 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 de .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 aucune 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 normal 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.scss plutôt que le traditionnel.façon sass.

Vous voudrez peut-être également consulter quelques @mixins utiles qui vous aideront avec votre build réactif.