Sass - Kommentare

In diesem Kapitel werden wir uns mit Sass befassen Comments. Kommentare sind nicht ausführbare Anweisungen, die im Quellcode abgelegt werden. Kommentare erleichtern das Verständnis des Quellcodes. SASS unterstützt zwei Arten von Kommentaren.

Multiline comments- Diese werden mit / * und * / geschrieben. Mehrzeilige Kommentare bleiben in der CSS-Ausgabe erhalten.
Single line comments - Diese werden mit geschrieben //gefolgt von Kommentaren. Einzeilige Kommentare bleiben in der CSS-Ausgabe nicht erhalten.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Kommentaren in der SCSS-Datei -

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

Erstellen Sie als Nächstes die Datei 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; }

Mit dem folgenden Befehl können Sie SASS anweisen, die Datei zu überwachen und das CSS zu aktualisieren, wenn sich die SASS-Datei ändert.

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

Führen Sie als nächstes den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

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

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

Speichern Sie den oben angegebenen HTML-Code in sass_comments.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Eine Ausgabe wird wie unten gezeigt angezeigt.

Klicken Sie auf diesen Link, um die Interpolation in mehrzeiligen Kommentaren zu untersuchen .

Sass - Interpolation in mehrzeiligen Kommentaren

Beschreibung

Die Interpolation innerhalb der mehrzeiligen Kommentare wird im resultierenden CSS aufgelöst. Sie können Variablen oder Eigenschaftsnamen in geschweiften Klammern angeben.

Syntax

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

Beispiel

Das folgende Beispiel zeigt die Verwendung der Interpolation in mehrzeiligen Kommentaren in der SCSS-Datei.

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

Erstellen Sie als Nächstes die Datei style.scss .

style.css

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

Mit dem folgenden Befehl können Sie SASS anweisen, die Datei zu überwachen und das CSS zu aktualisieren, wenn sich die SASS-Datei ändert.

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

Führen Sie als nächstes den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code

style.css

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

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

Speichern Sie den oben angegebenen HTML-Code in sass_comments_interpolation.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Eine Ausgabe wird wie unten gezeigt angezeigt.