MOINS - Fonctions

La description

LESS mappe le code JavaScript avec la manipulation des valeurs et utilise des fonctions prédéfinies pour manipuler les aspects des éléments HTML dans la feuille de style. Il fournit plusieurs fonctions pour manipuler les couleurs telles que la fonction ronde, la fonction de sol, la fonction de plafond, la fonction de pourcentage, etc.

Exemple

L'exemple suivant illustre l'utilisation des fonctions dans le fichier LESS -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Créez maintenant le fichier style.less .

sans style

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

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

lessc style.less style.css

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

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Production

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

  • Enregistrez le code html ci-dessus dans le functions.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, affiché, vous recevrez la sortie suivante.