Sass - Direttive at-root

Descrizione

La direttiva @ at-root è una raccolta di regole annidate che è in grado di creare il blocco di stile alla radice del documento.

@ at-root (senza: ...) e @ at-root (con: ...)

Il selettore @ at-root esclude il selettore per impostazione predefinita. Usando @ at-root , possiamo spostare lo stile al di fuori della direttiva annidata.

Ad esempio, crea un file SASS con il seguente codice:

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

Il codice sopra verrà compilato nel file CSS come mostrato di seguito -

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

.style {
   color: #808000;
}

Esempio

Il seguente esempio dimostra l'uso di @ at-root nel file 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>

Quindi, crea il file atroot.scss .

atroot.scss

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

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

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

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

Successivamente, esegui il comando precedente; creerà automaticamente il file atroot.css con il seguente codice -

atroot.css

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato in atroot.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

↰ Previous page