Sass - Commenti

In questo capitolo approfondiremo il Sass Comments. I commenti sono istruzioni non eseguibili, che vengono inserite nel codice sorgente. I commenti rendono il codice sorgente più facile da capire. SASS supporta due tipi di commenti.

  • Multiline comments- Questi sono scritti usando / * e * /. I commenti su più righe vengono conservati nell'output CSS.

  • Single line comments - Questi sono scritti usando //seguito da commenti. I commenti su una sola riga non vengono conservati nell'output CSS.

Esempio

L'esempio seguente mostra l'uso dei commenti nel file 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>

Quindi, crea il file 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; }

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

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

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

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; }

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato in sass_comments.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Per studiare l'interpolazione all'interno di commenti su più righe, fare clic su questo collegamento .

Sass - Interpolazione nei commenti multilinea

Descrizione

L'interpolazione all'interno dei commenti su più righe viene risolta nel CSS risultante. È possibile specificare variabili o nomi di proprietà all'interno delle parentesi graffe.

Sintassi

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

Esempio

L'esempio seguente mostra l'uso dell'interpolazione nei commenti su più righe nel file 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>

Quindi, crea il file style.scss .

style.css

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

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

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

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il codice seguente

style.css

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato in sass_comments_interpolation.htm file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.