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ファイルをブラウザで開くと、次のように出力が表示されます。

Sassのルールとディレクティブ

Sass-directives-atroot

Sass-ルートディレクティブ

説明

@ at-root（なし：…）および@ at-root（with：…）

例

atroot

atroot.scss

atroot.css

出力

目次

Sass-directives-atroot

Sass-ルートディレクティブ

説明

@ at-root（なし：…​）および@ at-root（with：…​）

例

atroot

atroot.scss

atroot.css

出力

@ at-root（なし：…）および@ at-root（with：…）