Sass-passing-content-blocks-to-mixin
提供：Dev Guides
Sass-コンテンツブロックをMixinに渡す
説明
スタイルのブロックは、スタイル内の配置のためにミックスインに渡されます。 _ @ content_ディレクティブの場所では、スタイルがミックスインに含まれます。
可変スコープとコンテンツブロック
コンテンツのブロックはスコープで評価され、ブロックが定義されているミックスインに渡されます。
例
次の例は、SCSSファイル内のmixinにコンテンツブロックを渡す方法を示しています-
pass_content
<html>
<head>
<title>Mixin example of sass</title>
<link rel = "stylesheet" type = "text/css" href = "sample.css"/>
</head>
<body>
<div class = "block">
<h1>Example using passing content blocks</h1>
<p>Different Colors</p>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
</body>
</html>次に、_sample.scss_ファイルを作成します。
sample.scss
@mixin element {
@content;
}
@include element {
.block {
color: green;
}
}次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-
sass --watch C:\ruby\lib\sass\sample.scss:sample.css次に、上記のコマンドを実行します。次のコードで自動的に_sample.css_ファイルを作成します-
sample.css
.block {
color: green;
}出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを pass_content.scss ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次のように出力が表示されます。
