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

$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-複数行コメントでの補間

Sass-comments-interpolation

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

説明

構文

例

style.scss

style.css

出力

目次