Sass-コメント

この章では、Sass Comments について学習します。コメントは実行不能なステートメントであり、ソースコードに配置されます。コメントはソースコードを理解しやすくします。 SASSは2種類のコメントをサポートしています。

複数行コメント-これらは/および/を使用して記述されます。複数行コメントは、CSS出力で保持されます。
単一行のコメント-これらは // とそれに続くコメントを使用して記述されます。 CSS出力では、単一行のコメントは保持されません。

例

次の例は、SCSSファイル内のコメントの使用を示しています-

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

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

次に、ファイル_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; }

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

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

次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-

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

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを sass_commentsl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sass Comments

複数行コメント内の補間について調べるには、次のリンクをクリックしてください：/sass/sass_comments_interpolation [link]。

Sass –複数行コメントでの補間

説明

複数行コメント内の補間は、結果のCSSで解決されます。中括弧内で変数またはプロパティ名を指定できます。

構文

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

例

次の例は、SCSSファイルの複数行コメントでの補間の使用を示しています-

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

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

次に、ファイル_style.scss_を作成します。

style.css

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

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

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

次に、上記のコマンドを実行します。次のコードで_style.css_ファイルを自動的に作成します

style.css

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

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを sass_comments_interpolation ファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sass Comments

Sass-comments

Sass-コメント

例

style.scss

style.css

出力

Sass –複数行コメントでの補間

説明

構文

例

style.css

style.css

出力

目次