Quelle est la différence entre SASS et SCSS?

SASS et SCSS: Quel préprocesseur à choisir?

Points de base

• SASS et SCSS sont tous deux des langages de script préprocesseurs compilés en CSS, mais ont une syntaxe différente. SASS utilise la syntaxe d'indentation, tandis que SCSS utilise une syntaxe de type CSS. Cela signifie que SASS ne nécessite pas de demi-colons ou de supports, tandis que SCSS utilise des supports pour représenter les blocs de code et sépare les lignes dans les blocs avec des demi-colons.
• Le choix de SASS et SCSS dépend des préférences personnelles et des besoins du projet. Cependant, comme SCSS a une syntaxe similaire, SCSS peut être plus facile à démarrer pour les débutants ou ceux qui connaissent déjà CSS. Il est également plus compatible avec les outils, les plugins et les démos existants, ce qui en fait une option plus pratique pour de nombreux développeurs.
• SASS et SCSS fournissent tous deux des caractéristiques avancées que l'on trouve dans le CSS normal, telles que les variables, la nidification, le mélange et l'héritage, qui peuvent améliorer la lisibilité, la maintenabilité et l'efficacité de l'écriture du CSS. Cependant, l'utilisation des deux nécessite des étapes de compilation, ce qui peut augmenter la complexité du processus de construction.

Cet article est une version mise à jour de l'article publié le 28 avril 2014

J'ai beaucoup écrit sur SASS, mais certains des commentaires que j'ai reçus montrent clairement que tout le monde ne sait pas exactement à quoi Sass fait référence. Voici quelques clarifications: lorsque nous parlons de sass , nous nous référons généralement aux préprocesseurs et à l'ensemble de la langue. Par exemple, nous dirions «nous utilisons SASS» ou «Ceci est un mixin Sass». Pendant ce temps, SASS (préprocesseur) permet deux syntaxes différentes:

• sass, également connu sous le nom de syntaxe d'indentation
• SCSS, une syntaxe similaire à CSS

HISTOIRE DE SASS

Initialement, SASS faisait partie d'un autre préprocesseur appelé HAML, conçu et écrit par Ruby Developers. Par conséquent, la feuille de style SASS utilise une syntaxe de type rubis, sans accolades, demi-colons et indentation stricte comme suit:

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

Comme vous pouvez le voir, c'est une grande différence par rapport au CSS ordinaire! Même si vous êtes un utilisateur SASS, vous pouvez voir que cela est différent de ce à quoi nous sommes habitués. Le symbole variable est! Très étrange. Mais c'est à quoi ressemblait Sass avant la sortie de la version 3.0 en mai 2010, qui a introduit une toute nouvelle syntaxe appelée SCSS pour Sassy CSS . Cette syntaxe vise à réduire l'écart entre SASS et CSS en introduisant une syntaxe CSS conviviale.

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

SCSS est plus proche de CSS que SASS. Autrement dit, les mainteneurs SASS s'efforcent également de se rapprocher les deux syntaxes en se déplaçant! Maintenant, lors du démarrage d'un nouveau projet, vous voudrez peut-être savoir quelle syntaxe vous devez utiliser. Permettez-moi de faire la lumière sur les chemins et d'expliquer les avantages et les inconvénients de chaque syntaxe.

Avantages de la syntaxe d'indentation SASS

Bien que cette syntaxe puisse sembler étrange, elle a des points intéressants. Tout d'abord, il est plus court et plus facile à entrer. Plus de nappes accolades et de virolons sont nécessaires, vous n'avez pas besoin de toutes ces choses. mieux! @Mixin ou @include n'est pas requis, lorsqu'un seul caractère est suffisant: = et. De plus, la syntaxe SASS applique les normes de codage propres en s'appuyant sur l'indentation. Parce que la mauvaise indentation est susceptible de corrompre toute la feuille de style. Il n'y a qu'une seule façon d'écrire du code SASS: un bon moyen. Mais soyez prudent! L'indentation dans Sass signifie quelque chose . Lors de l'indentation du sélecteur, cela signifie qu'il est imbriqué dans le sélecteur précédent. Par exemple:

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

… Le CSS suivant sera sorti:

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

Le simple fait qui pousse .Element-B un niveau vers le bon signifie qu'il s'agit d'un enfant de .element-a, modifiant ainsi le CSS généré. S'il vous plaît

soyez très prudent votre indentation! Soit dit en passant, je pense que la syntaxe basée sur l'indentation pourrait être plus adaptée à l'équipe Ruby / Python que l'équipe PHP / Java (bien que cela soit discutable, j'aimerais entendre le contraire).

Avantages de la syntaxe SCSS

Pour les débutants, il est entièrement conforme au CSS. Cela signifie que vous pouvez renommer le fichier CSS en .SCSS et cela fonctionnera correctement. Rendre SCSS Full CSS compatible a été une priorité absolue pour SASS REFENTEURS depuis sa sortie, et à mon avis, c'est un gros problème. En outre, ils essaient de s'en tenir à la syntaxe possible qui peut devenir une syntaxe CSS valide à l'avenir (et donc la directive @). Parce que SCSS est compatible avec CSS, cela signifie qu'il n'y a presque pas de courbe d'apprentissage. La syntaxe est déjà connue: après tout, c'est juste CSS avec une petite quantité de contenu supplémentaire. Ceci est important lorsque vous travaillez avec des développeurs inexpérimentés: ils pourront commencer rapidement à coder sans rien savoir sur SASS. De plus, il est plus facile à lire car cela a du sens. Lorsque vous lisez @Mixin, vous savez que c'est une déclaration de mixin; lorsque vous voyez @include, vous appelez un mixin. Il n'utilise aucun raccourci, et tout a du sens lorsqu'il est lu à haute voix. De plus, la plupart des outils, plugins et démos SASS existants sont développés à l'aide de la syntaxe SCSS. Au fil du temps, cette syntaxe devient de plus en plus importante et devient le choix par défaut, principalement pour les raisons ci-dessus.

Réflexions finales

L'option dépend de vous, mais à moins que vous n'ayez de bonnes raisons de coder en utilisant la syntaxe d'indentation, je recommande fortement d'utiliser SCSS au lieu de SASS. Il est non seulement plus simple, mais aussi plus pratique. J'ai essayé la syntaxe d'indentation moi-même et j'ai aimé. J'aime à quel point c'est court et facile. Avant de changer d'avis au dernier moment, je prévois de déplacer toute la base de code vers Sass au travail. Je suis reconnaissant pour mon moi passé qui a empêché cette décision car il serait très difficile de travailler avec certains de nos outils si nous utilisons la syntaxe d'indentation. De plus, notez sass n'utilise jamais de majuscules, que vous parliez de langue ou de grammaire. Pendant ce temps, SCSS utilise toujours des lettres majuscules. Besoin d'un rappel? Sassnotsass.com peut vous aider!

FAQ sur SASS et SCSS

Quelle est la principale différence entre SASS et SCSS?

SASS (styles synonymes) et SCSS (Sassy CSS) sont tous deux des langues de script préprocesseur interprétées comme des feuilles de style en cascade (CSS). La principale différence entre les deux est leur syntaxe. SASS suit une syntaxe basée sur l'indentation, ce qui signifie qu'elle ne nécessite pas de demi-colons ou de supports. SCSS, en revanche, suit une syntaxe similaire à CSS, en utilisant des supports pour représenter les blocs de code et séparer les lignes dans des blocs avec des demi-colons.

Puis-je convertir SASS en SCSS et vice versa?

Oui, vous pouvez convertir SASS en SCSS et vice versa. Il existe plusieurs outils en ligne disponibles qui peuvent vous aider à convertir votre code d'une syntaxe à une autre. Cependant, il convient de noter que pendant le processus de conversion, certaines fonctions peuvent ne pas être converties directement en raison des différences de syntaxe.

Est-il plus facile d'apprendre Sass ou SCSS?

Cela dépend fortement de votre familier avec CSS. Si vous connaissez déjà CSS, vous pouvez trouver SCSS plus facile à apprendre car sa syntaxe est très similaire. Cependant, si vous n'êtes pas familier avec CSS, vous pouvez trouver une syntaxe basée sur l'indentation de SASS et plus intuitive.

Puis-je utiliser SASS et SCSS dans le même projet?

Techniquement, vous pouvez utiliser SASS et SCSS dans le même projet. Cependant, il est souvent recommandé de s'en tenir à une syntaxe pour assurer la cohérence et la lisibilité. La syntaxe mixte peut provoquer une confusion et rendre votre code plus difficile à maintenir.

Quels sont les avantages de l'utilisation de SASS ou SCSS par rapport aux CSS réguliers?

SASS et SCSS fournissent tous deux des fonctionnalités qui ne sont pas disponibles dans le CSS normal, tels que les variables, la nidification, le mélange, l'héritage, etc. Ces fonctionnalités peuvent rendre vos feuilles de style plus faciles à lire et à maintenir, et vous faire gagner du temps et des efforts dans l'écriture de CSS.

SCSS est-il le même que CSS?

Bien que SCSS soit similaire à CSS en termes de syntaxe, ils ne sont pas les mêmes. SCSS est un langage préprocesseur qui ajoute des fonctionnalités puissantes à CSS telles que les variables, la nidification, le mixin et l'héritage. Ces fonctionnalités ne sont pas disponibles dans le CSS normal.

Ai-je besoin d'outils spéciaux pour compiler SASS ou SCSS?

Oui, vous avez besoin d'un compilateur pour convertir SASS ou SCSS en CSS. À cette fin, il existe de nombreux outils disponibles, tels que le nœud-Sass, Dart-Sass et Ruby-Sass. Ces outils peuvent être intégrés dans votre processus de construction pour compiler automatiquement vos fichiers SASS ou SCSS dans CSS.

Puis-je utiliser SASS ou SCSS avec n'importe quel cadre CSS?

Oui, vous pouvez utiliser SASS ou SCSS avec n'importe quel cadre CSS. De nombreux cadres CSS populaires, tels que bootstrap et fondation, proposent même des versions SASS ou SCSS de leurs feuilles de style pour une personnalisation plus facile.

Y a-t-il des inconvénients à utiliser SASS ou SCSS?

Un inconvénient potentiel de l'utilisation de SASS ou SCSS est le besoin d'étapes de compilation. Cela peut ajouter de la complexité au processus de construction et peut nécessiter des outils et une configuration supplémentaires. Cependant, les avantages de l'utilisation de SASS ou SCSS, tels que l'amélioration de la lisibilité et de la maintenabilité, l'emportent souvent sur ce désavantage.

SASS ou SCSS est-il plus populaire?

SASS et SCSS sont tous deux largement utilisés, mais SCSS semble être plus populaire, probablement parce qu'il est similaire à CSS. Cependant, le choix entre SASS et SCSS dépend généralement des préférences personnelles et des besoins spécifiques du projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!