Sass - Comentarios

En este capítulo, estudiaremos sobre Sass Comments. Los comentarios son declaraciones no ejecutables que se colocan en el código fuente. Los comentarios facilitan la comprensión del código fuente. SASS admite dos tipos de comentarios.

Multiline comments- Estos se escriben usando / * y * /. Los comentarios de varias líneas se conservan en la salida CSS.
Single line comments - Estos están escritos usando //seguido de comentarios. Los comentarios de una sola línea no se conservan en la salida CSS.

Ejemplo

El siguiente ejemplo demuestra el uso de comentarios en el archivo 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>

A continuación, cree el archivo 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; }

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, usando el siguiente comando

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

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente en sass_comments.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

Para estudiar la interpolación en comentarios de varias líneas, haga clic en este enlace .

Sass - Interpolación en comentarios multilínea

Descripción

La interpolación dentro de los comentarios de varias líneas se resuelve en el CSS resultante. Puede especificar variables o nombres de propiedades dentro de las llaves.

Sintaxis

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

Ejemplo

El siguiente ejemplo demuestra el uso de la interpolación en comentarios de varias líneas en el archivo 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>

A continuación, cree el archivo style.scss .

style.css

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

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, usando el siguiente comando

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

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código

style.css

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente en sass_comments_interpolation.htm archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page Next page ↱