MOINS - Utiliser moins dans le navigateur

Less est utilisé dans le navigateur lorsque vous souhaitez compiler le fichier Less de manière dynamique en cas de besoin et non côté serveur; c'est parce que less est un gros fichier javascript.

Pour commencer, nous devons ajouter le script LESS pour utiliser LESS dans le navigateur -

<script src = "less.js"></script>

Pour trouver les balises de style sur la page, nous devons ajouter la ligne suivante sur la page. Il crée également les balises de style avec le CSS compilé.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Options de réglage

Avant la balise de script, les options peuvent être définies par programme sur l'objet le moins. Cela affectera toute l'utilisation programmatique de less et les balises de lien initiales.

Par exemple, nous pouvons définir l'option comme suit -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Nous pouvons également définir l'option dans un autre format sur la balise de script comme spécifié ci-dessous -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Vous pouvez également ajouter ces options aux balises de lien.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Les points à prendre en compte pour les options d'attribut sont:

  • window.less <script tag <balise de lien est le niveau d'importance.

  • Les attributs de données ne peuvent pas être écrits en cas de chameau; l'option de balise de lien est représentée sous forme d'options de temps.

  • Les attributs de données avec des valeurs sans chaîne doivent être valides JSON.

Mode montre

Le mode surveillance peut être activé en définissant l'option env sur développement et en appelant less.watch () après l'ajout du fichier less.js. Si vous souhaitez que le mode montre soit activé temporairement, ajoutez #! Watch à l'URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Modifier les variables

La modification du temps d'exécution de la variable LESS est activée. Le fichier LESS est recompilé lorsque la nouvelle valeur est appelée. Le code suivant montre l'utilisation de base des variables de modification -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Débogage

Nous pouvons ajouter l'option ! DumpLineNumbers: mediaquery à l' option url ou dumpLineNumbers comme mentionné ci-dessus. L' option mediaquery peut être utilisée avec FireLESS (elle affiche le nom de fichier LESS d'origine et le numéro de ligne des styles CSS générés par LESS.)

Options

Avant de charger le fichier script less.js, les options doivent être définies dans un objet global less .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

  • async- C'est un type booléen. Les fichiers importés sont demandés avec l'option async ou non. Par défaut, il est faux.

  • dumpLineNumbers- C'est un type de chaîne. Dans le fichier css de sortie, les informations de la ligne source sont ajoutées lorsque le dumpLineNumbers est défini. Cela aide à déboguer la règle particulière qui provient.

  • env- C'est un type de chaîne. L'env peut s'exécuter en développement ou en production. Le développement est défini automatiquement lorsque l'URL du document commence parfile:// ou il est présent sur votre machine locale.

  • errorReporting - Lorsque la compilation échoue, la méthode de rapport d'erreur peut être définie.

  • fileAsync- C'est un type booléen. Lorsqu'une page est présente avec un protocole de fichier, elle peut demander si l'importation est asynchrone ou non.

  • functions - C'est le type d'objet.

  • logLevel- C'est un type de nombre. Il affiche le niveau de journalisation dans la console javascript.

    • 2: Informations et erreurs

    • 1: Erreurs

    • 0: rien

  • poll- En mode montre, l'heure s'affiche en millisecondes entre les sondages. C'est un type entier; par défaut, il est défini sur 1000.

  • relativeUrls- Les URL s'ajustent pour être relatives; par défaut, cette option est définie sur false. Cela signifie que les URL sont déjà relatives au fichier d'entrée moins. C'est un type booléen.

  • globalVars- Insère la liste des variables globales dans le code. La variable de type chaîne doit être incluse entre guillemets

  • modifyVars- Il est différent de l'option de variable globale. Il déplace la déclaration à la fin de votre fichier less.

  • rootpath - Il définit les chemins au début de chaque ressource URL.

  • useFileCache- Utilise par cache de fichiers de session. Le cache dans moins de fichiers est utilisé pour appeler les modifyVars où tous les moins de fichiers ne seront pas récupérés à nouveau.