Sass - Directivas en la raíz

Descripción

La directiva @ at-root es una colección de reglas anidadas que pueden hacer que el bloque de estilo esté en la raíz del documento.

@ at-root (sin: ...) y @ at-root (con: ...)

@ at-root selector excluye el selector por defecto. Al usar @ at-root , podemos mover el estilo fuera de la directiva anidada.

Por ejemplo, cree un archivo SASS con el siguiente código:

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

El código anterior se compilará en el archivo CSS como se muestra a continuación:

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

.style {
   color: #808000;
}

Ejemplo

El siguiente ejemplo demuestra el uso de @ at-root en el archivo 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>

A continuación, cree el archivo atroot.scss .

atroot.scss

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

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

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

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

A continuación, ejecute el comando anterior; creará el archivo atroot.css automáticamente con el siguiente código:

atroot.css

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en atroot.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page