Ecriture de CSS dynamique avec Jade

Je suis en train d'écrire quelques CSS dynamique à l'aide de Jade, comme suit:

style(type='text/css')
    each item in colors
        .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }

Cependant cela donne l'erreur suivante:

ReferenceError: media='print')
    7|  style(type='text/css')
  > 8|      - for(var item in colors)
    9|          .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }
    10| block Content
    11|     include scheduleTemplate

item is not defined

Si je retire la balise style, il rend très bien. Est-il possible d'utiliser itération à l'intérieur d'un bloc de style?

source d'informationauteur Tyler Schroeder

  1. 10

    Parce que style les tags permettent au texte de Jade, c'est le traitement de votre each item in colors en tant que texte brut. Puis il rencontre le #{item.class} et tente d'analyser, mais il échoue car il n'a pas définir item sur la ligne précédente.

    Malheureusement, je ne suis pas sûr qu'il y est un bon moyen de le faire dans de Jade. Vous pourriez avoir à définir l'ensemble de votre css à l'avance en JS et ensuite de l'insérer comme suit:

    style(type='text/css')
    #{predefined_css}

    À ce point, cependant, il pourrait être plus simple pour déplacer les styles d'une feuille de style externe, qui est généré pour chaque utilisateur, puis servir avec de raisonnable, la mise en cache des en-têtes. Qui permettrait d'éviter les difficultés à essayer de faire de Jade n'CSS dynamique et d'accélérer les chargements des pages suivantes pour vos utilisateurs.

  2. 3

    Vous pouvez utiliser le Stylet. Il est fait par les mêmes personnes qui ont créé de Jade et est presque identique à Jade dans la raison.

  3. 2

    Une autre façon est d'importer votre propre feuille de style css. Dans le Jade docvous pouvez voir que vous pouvez inclure une feuille de style avec ce code:

    html
  head
    style
      include style.css

    Ensuite, vous pouvez définir une feuille CSS dans un fichier séparé que vous pouvez faire référence.

  4. 0

    J'ai rencontré un problème similaire où je voulais ajouter une classe spécifique à la balise body en fonction de l'itinéraire, similaire à ce que j'ai fait en PHP. En fin de compte, j'ai utilisé de jade de l'héritage de modèle pour obtenir un résultat semblable.