Javascript Girl
  1. Javascript Girl
  3. Changer dynamiquement les variables LESS en page avec JavaScript
Intereting Posts
Format de l'heure de la date avec moment.js pour afficher le fuseau horaire Filtrage des données JSON Ajouter le paramètre Query-String à la liaison statique sur le clic Page_ClientValidate valide plusieurs fois. Comment interrogez-vous en utilisant plusieurs conditions dans IndexedDB? VueJS et tinyMCE, directives personnalisées Où cookie enregistré pour le fichier HTML local Setter Javascript et getter avec clé pour objet Vérifiez si l'élément est visible dans DOM Des informations officielles sur `arguments 'dans les fonctions Arrow ES6? Détection d'une "date invalide" Date instance en JavaScript Toile HTML – le dessin disparaît en redimensionnant Politique de sécurité de contenu Gmail sur les extensions Chrome Existe-t-il un équivalent javascript pour l'instruction Python Pass qui ne fait rien? Téléchargez le fichier texte au lieu d'ouvrir le navigateur

Changer dynamiquement les variables LESS en page avec JavaScript

J'essaie d'utiliser less.js pour modifier dynamiquement les variables LESS avec JavaScript. Cependant, je n'arrive pas à le faire fonctionner avec modifyVars , watch ou refresh .

J'ai essayé de mettre la balise de lien de feuille de style avant de charger less.js, en utilisant less.modifyVars({'@bg': '#00ff00'}) , mais aucun changement ne se produit dans l'arrière-plan. Le moins de fichier que j'utilise est simple: 

 @bg: #000; body { background-color: @bg; }

J'ai également essayé de mettre la balise de lien de feuille de style après less.js, comme mentionné dans cette question , et en utilisant less.sheets.push($('#less-link')[0]) suivi d'un appel pour modifyVars puis refresh . Pas de changement dans la couleur d'arrière-plan.

J'ai également essayé de commenter le @bg: #000; Dans le fichier MOINS, puis le configurer via modifyVars . Pas de chance: je Less::ParseError: variable @bg is undefined par un Less::ParseError: variable @bg is undefined .

Comment puis-je modifier dynamiquement les variables LESS et avoir la mise à jour de l'apparence de la page pour refléter ces changements?

Edit: hm, il se peut qu'il y ait quelque chose de magicien Rails. Lorsque j'ai chargé mon fichier moins, la définition de la variable était disparue et tout ce que j'ai vu était body { background-color: #000; } body { background-color: #000; } . Lorsque j'ai commuté à l'aide d'un bloc <style type="text/less"> de LESS intégré dans la page et que j'ai utilisé cette less.Override('@bg', '#00ff00') LESS JavaScript , j'ai pu modifier une variable avec less.Override('@bg', '#00ff00') Et la couleur d'arrière-plan de la page a immédiatement changé. Merci à cette réponse . Maintenant, je vais l'essayer avec moins.js en utilisant la <style> au lieu de <link> .

Edit: on dirait moins-1.3.3.min.js veut que MOINS soit chargé dans les tags de link – Je reçois TypeError: Cannot read property 'href' of undefined lorsque j'essaie d'utiliser modifyVars et que ma page ressemble à ceci: 

 <style type="text/less"> @bg: #000; body { background-color: @bg; } </style> <script src="/assets/less-1.3.3.min.js?body=1" type="text/javascript"></script>

Au lieu de faire la variable remplaçant côté client, puisque je le faisais dans une application Rails de toute façon, je l'ai déplacé sur le serveur. J'utilise les liaisons Ruby pour MOINS pour analyser MOINS, ce qui inclut mes variables personnalisées, rendant le résultat analysé avec content_type: 'text/css' et utilisant une requête AJAX pour ajouter un lien de feuille de style au CSS rendu.