Sass - Directives à la racine

La description

La directive @ at-root est une collection de règles imbriquées qui est capable de créer le bloc de style à la racine du document.

@ at-root (sans: ...) et @ at-root (avec: ...)

@ at-root selector exclut le sélecteur par défaut. En utilisant @ at-root , nous pouvons déplacer le style en dehors de la directive imbriquée.

Par exemple, créez un fichier SASS avec le code suivant -

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

Le code ci-dessus sera compilé dans le fichier CSS comme indiqué ci-dessous -

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

.style {
   color: #808000;
}

Exemple

L'exemple suivant illustre l'utilisation de @ at-root dans le fichier 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>

Ensuite, créez le fichier atroot.scss .

atroot.scss

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

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

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

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

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier atroot.css avec le code suivant -

atroot.css

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

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans atroot.html fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page