Sass - Syntaxe

Dans ce chapitre, nous étudierons le SASS Syntax. SASS prend en charge deux syntaxes à savoirSCSS et Indented syntax.

le SCSS (Sassy CSS)est une extension de la syntaxe CSS. Cela signifie que chaque CSS valide est également un SCSS valide. SCSS facilite beaucoup la gestion des feuilles de style volumineuses et peut reconnaître la syntaxe spécifique du fournisseur, de nombreux fichiers CSS et SCSS utilisent l'extension.scss.
Indented - C'est une syntaxe plus ancienne et parfois simplement appelée SASS. En utilisant cette forme de syntaxe, CSS peut être écrit de manière concise. Les fichiers SASS utilisent l'extension.sass.

Syntaxe indentée SASS

La syntaxe SASS indentée ou simplement SASS est une alternative à la syntaxe SCSS basée sur CSS.

Il utilise l' indentation plutôt que{ et } pour délimiter des blocs.
Pour séparer les instructions, il utilise des retours à la ligne au lieu de points - virgules (;) .
La déclaration de propriété et les sélecteurs doivent être placés sur sa propre ligne et les déclarations dans{ et }doit être placé sur une nouvelle ligne et en retrait .

Par exemple, considérez le code SCSS suivant -

.myclass {
   color = red;
   font-size = 0.2em;
}

le indentedLa syntaxe est une syntaxe plus ancienne, qui n'est pas recommandée pour une utilisation dans les nouveaux fichiers Sass. Si vous utilisez ce fichier, il affichera une erreur dans le fichier CSS comme nous l'avons utilisé= au lieu de pour définir les propriétés et les variables.

Compilez le code ci-dessus en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus; il affichera une erreur dans le fichier style.css comme indiqué ci-dessous -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Différences de syntaxe de SASS

La plupart des syntaxes CSS et SCSS fonctionnent parfaitement dans SASS. Cependant, il existe certaines différences, qui sont expliquées dans les sections suivantes -

Syntaxe de propriété

Les propriétés CSS peuvent être déclarées de deux manières -

Les propriétés peuvent être déclarées similaires à CSS mais sans semicolon(;).
colon(:) sera préfixé à chaque nom de propriété.

Par exemple, vous pouvez écrire comme -

.myclass
   :color red
   :font-size 0.2em

Les deux méthodes ci-dessus (déclaration de propriétés sans point-virgule et deux-points préfixés au nom de la propriété) peuvent être utilisées, par défaut. Cependant, une seule syntaxe de propriété est autorisée à spécifier lorsque vous utilisez l' option : property_syntax .

Sélecteurs multilignes

Dans la syntaxe indentée, les sélecteurs peuvent être placés sur une nouvelle ligne chaque fois qu'ils apparaissent après commas.

Exemple

L'exemple suivant décrit l'utilisation de sélecteurs multilignes dans le fichier SCSS -

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Ensuite, créez le fichier style.scss . Notez l' extension .scss .

style.scss

.class1,
.class2{
   color:red;
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus, elle créera automatiquement le fichier style.css avec le code suivant -

Le style.css généré est comme indiqué ci-dessous -

style.css

.class1,
.class2 {
   color: red;
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans le fichier multiline_selectors .html.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

commentaires

Les commentaires occupent une ligne entière et entourent tout le texte imbriqué en dessous. Ils sont basés sur des lignes dans une syntaxe indentée. Pour plus d'informations sur les commentaires, reportez-vous à ce lien .

@importer

Dans SASS le @importdirective peut être écrite avec / sans guillemets. Contrairement à SCSS, ils doivent être utilisés avec des guillemets.

Par exemple, dans SCSS, le @import directive peut être utilisée comme -

@import "themes/blackforest";
@import "style.sass";

Cela peut être écrit en SASS comme -

@import themes/blackforest
@import fontstyle.sass

Directives Mixin

SASS prend en charge le raccourci pour les directives comme @mixin et @include. Au lieu de@mixin et @include vous pouvez utiliser = et + caractères, qui nécessitent moins de frappe et rendent votre code plus simple et plus facile à lire.

Par exemple, vous pouvez écrire les directives mixin comme -

=myclass
   font-size: 12px;
p
   +myclass

Le code donné ci-dessus est le même que -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Syntaxe obsolète

SASS prend en charge l'utilisation d'une ancienne syntaxe. Cependant, utiliser cette syntaxe dans SASS estnot recommended. Un avertissement sera affiché si vous utilisez cette syntaxe et il est supprimé dans les versions ultérieures. Certaines des anciennes syntaxes sont présentées dans le tableau suivant.

S. Non.	Opérateur et description
1	= Il a été utilisé à la place de: lors de la définition de variables et de propriétés sur des valeurs de SassScript.
2	\|\|= Il a été utilisé à la place de: chaque fois que vous attribuez une valeur par défaut à une variable.
3	! Au lieu de $,! a été utilisé comme préfixe de variable. La fonctionnalité ne sera pas modifiée lorsqu'elle est utilisée à la place de $.

↰ Previous page Next page ↱