Sass - Diretivas At-root

Descrição

A diretiva @ at-root é uma coleção de regras aninhadas que podem fazer o bloco de estilo na raiz do documento.

@ at-root (sem: ...) e @ at-root (com: ...)

O seletor @ at-root exclui o seletor por padrão. Usando @ at-root , podemos mover o estilo para fora da diretiva aninhada.

Por exemplo, crie um arquivo SASS com o seguinte código -

@media print {
   .style {
      height: 8px;
      @at-root (without: media) {
         color: #808000;;
      }
   }
}

O código acima será compilado no arquivo CSS conforme mostrado abaixo -

@media print {
   .style {
      height: 8px;
   }
}

.style {
   color: #808000;
}

Exemplo

O exemplo a seguir demonstra o uso de @ at-root no arquivo SCSS -

atroot.htm

<!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>

Em seguida, crie o arquivo atroot.scss .

atroot.scss

h2 {
   color: #808000;
   background-color: #DB7093;

   @at-root {
      .style{
         font-size: 20px;
         font-style: bold;
         color: #B8860B;
      }
   }
}

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

A seguir, execute o comando acima; ele criará o arquivo atroot.css automaticamente com o seguinte código -

atroot.css

h2 {
   color: #808000;
   background-color: #DB7093;
}
.style {
   font-size: 20px;
   font-style: bold;
   color: #B8860B;
}

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima em atroot.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

↰ Previous page