Changement de variable dynamique (à l'exécution) par l'intermédiaire de MOINS et CSS?

@myThemeBackground = #ddd;  

div#box1 { background: @myThemeBackground; }

Je suis en utilisant MOINS dans le but d'utiliser les variables de mon css. Il fonctionne très bien, mais je me demandais si il existe un moyen pour moi de changer la "myThemeBackground" dynamiquement à l'exécution via javascript ou quelque chose.

Donc, dire si l'utilisateur choisit une couleur personnalisée pour le fond j'aimerais que l'ensemble de la peau pour changer.

Remarque: c'est la dynamique de la thématisation/skinning une application où l'utilisateur choisit la couleur pour l'arrière-plan, par exemple, et l'ensemble de l'application des modifications (sans rafraichissement de la page)

Combien de couleurs vous adressez-vous? Un ensemble de couleurs prédéfinies ou un choix illimité de couleurs?
Choix illimité de couleurs qu'un utilisateur peut sélectionner à partir d'un sélecteur de couleur.

OriginalL'auteur foreyez | 2012-03-30

  1. 12

    Vous pouvez modifier les Moins de variables à la volée à l'aide de la modifyVars méthode:

    less.modifyVars({ myThemeBackground : '#000' });
    Ce n'est pas de travail pour moi avec less-1.3.3.min.js. Rien ne se passe lorsque j'utilise modifyVars soit comme vous l'avez indiqué, ou par le passage d'un argument comme {'@myThemeBackground': '#000'}.
    J'ai le même problème, est-il possible de faire moins.modifyVars travail dans la version 1.3.3?
    Ce pétantes ne fonctionne pas? Le moins global existent? Le modifyVars méthode? Les messages d'erreur? 1.3.3 changelog ne parle pas de tous les changements importants.

    OriginalL'auteur Sebastian vom Meer

  2. 1

    J'ai l'habitude de saisir le CSS généré par MOINS et de l'inclure dans un fichier afin d'optimiser la vitesse de chargement d'une page web. En fait, j'utilise De moins en MOINS.app pour Mac pour générer mon CSS.

    À ma connaissance, une partie de la solution impliquerait notamment less.js fichier sur votre page. Cela signifie que la génération de la style de la page serait lente et la mise en cache peut vous causer des ennuis trop...

    Je suggère humblement de la production de plusieurs feuilles de style CSS avec MOINS et d'inclure ces fichiers si nécessaire avec JavaScript.

    +1 Très bons conseils. Dans certaines situations, vous pourriez envisager de générer plus de fichiers statiques sur le serveur lors de l'exécution. Cela permet la mise en cache, rendu plus rapide, et un téléchargement plus rapide.
    Vous ne savez pas si vous avez compris ma question. Je suis à la recherche d'un moyen d'exécution pour changer un Moins variable et ont-elle s'appliquer à ma page. Donc Si j'ai mis myThemeBackground au Bleu puis ma page d'arrière-plan de façon dynamique ont cette couleur.
    J'ai compris la question. Je suis en train de travailler sur une solution maintenant.
    merci, je suis en train de penser si peut-être il ya un moyen d'ajouter de la moins variable en javascript et ensuite faire un de moins.refreshStyles() ou quelque chose.. comme vous de la charge initiale .moins fichier css. et puis en javascript vous modifiez l'une des variables, et ensuite, vous faites une de moins.refreshStyles() somethign le long de ces lignes de toute façon..
    J'ai été à la recherche dans un serveur de côté la solution qui consiste à AJAX et node.js.

    OriginalL'auteur Alerty

  3. 0

    La seule solution que je vois est de modifier le texte vous rendre avec less.js avec:

    less.refreshStyles()

    Modifier le texte dans le fichier ou du moins l'extrait de code de style.

    Lire plus à ce sujet ici:
    Charge less.js dynamique de règles

    OriginalL'auteur bArmageddon