MOINS - CSS Guards

La description

Les gardes sont utilisées pour faire correspondre des valeurs simples ou un certain nombre d'arguments sur des expressions. Il est appliqué aux sélecteurs CSS. C'est une syntaxe pour déclarer mixin et l'appeler immédiatement. Pour réussir à faire ressortirifdéclaration de type; rejoindre ceci avec fonctionnalité&, qui vous permet de regrouper plusieurs gardes.

Exemple

L'exemple suivant montre l'utilisation de css guard dans le fichier LESS -

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

Vous pouvez compiler le fichier style.less dans style.css à l'aide de la commande suivante -

lessc style.less style.css

Exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

.style {
   background-color: blue;
   color: white;
}

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le css_guard.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.