Sass-directives-atroot
提供：Dev Guides
Sass-ルートディレクティブ
説明
_ @ at-root_ディレクティブは、ドキュメントのルートでスタイルブロックを作成できるネストされたルールのコレクションです。
@ at-root（なし：…）および@ at-root（with：…）
_ @ at-root_ selectorは、デフォルトでセレクターを除外します。 _ @ at-root_を使用することで、ネストされたディレクティブの外側にスタイルを移動できます。
たとえば、次のコードで1つのSASSファイルを作成します-
@media print {
.style {
height: 8px;
@at-root (without: media) {
color: #808000;;
}
}
}上記のコードは、以下に示すようにCSSファイルにコンパイルされます-
@media print {
.style {
height: 8px;
}
}
.style {
color: #808000;
}例
次の例は、SCSSファイルでの_ @ at-root_の使用を示しています-
atroot
<!doctype html>
<head>
<title>At-root Example</title>
<link rel = "stylesheet" href = "atroot.css" type = "text/css"/>
</head>
<body class = "container">
<h2>Example using at-root</h2>
<p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>次に、_atroot.scss_ファイルを作成します。
atroot.scss
h2 {
color: #808000;
background-color: #DB7093;
@at-root {
.style{
font-size: 20px;
font-style: bold;
color: #B8860B;
}
}
}次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-
sass --watch C:\ruby\lib\sass\atroot.scss:atroot.css次に、上記のコマンドを実行します。それは、次のコードで_atroot.css_ファイルを自動的に作成します-
atroot.css
h2 {
color: #808000;
background-color: #DB7093;
}
.style {
font-size: 20px;
font-style: bold;
color: #B8860B;
}出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを atrootl ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次のように出力が表示されます。
