Sass - Commentaires

Dans ce chapitre, nous étudierons Sass Comments. Les commentaires sont des instructions non exécutables, qui sont placées dans le code source. Les commentaires facilitent la compréhension du code source. SASS prend en charge deux types de commentaires.

  • Multiline comments- Ceux-ci sont écrits en utilisant / * et * /. Les commentaires multilignes sont conservés dans la sortie CSS.

  • Single line comments - Ceux-ci sont écrits en utilisant //suivi de commentaires. Les commentaires sur une seule ligne ne sont pas conservés dans la sortie CSS.

Exemple

L'exemple suivant illustre l'utilisation de commentaires dans le fichier SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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; il créera automatiquement le fichier style.css avec le code suivant -

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Production

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

  • Enregistrez le code html ci-dessus dans sass_comments.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Pour étudier l'interpolation dans les commentaires multilignes, cliquez sur ce lien .

Sass - Interpolation dans les commentaires multilignes

La description

L'interpolation dans les commentaires multilignes est résolue dans le CSS résultant. Vous pouvez spécifier des variables ou des noms de propriétés entre accolades.

Syntaxe

$var : "value";
/* multiline comments #{$var} */

Exemple

L'exemple suivant illustre l'utilisation de l'interpolation dans les commentaires multilignes dans le fichier SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

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; il créera automatiquement le fichier style.css avec le code suivant

style.css

/* Framework version for the generated CSS is 7.8. */

Production

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

  • Enregistrez le code html ci-dessus dans sass_comments_interpolation.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.