in node.js, how to pass variables to :stylus filte

Question

creating a variable within jade that I wish the stylus filter to use.

using #{var} does not appear to work. for example, this code:

  - var color1 = 'blue'
  stylus:
    div
      background-color pink
      color #{color1}

gives resulting error:

/home/data/tnt/server/node/www/tech/cool.jade:2
   1| div
   2|   background-color pink
 > 3|   color #{color1}
   4|   

expected "indent", got "outdent"

how do I get the jade variable color1 visible within the stylus filter?

Answer 1

Filters (like stylus, markdown etc.) are executed during "compile-time", and only once.

But text replacement is done during run-time, so filters don't have access to variables.

Filters can only access the raw text eg. color #{color1} and not color blue

As a workaround you can create a helper method where you do stylus templating and rendering yourself as suggested in multiple places (I've only found examples which are used the markdown filter but filters are working the same so they apply also the stylus filter):

• Jade: Pass markdown filter a variable.
• :markdown filter processing the text of a String variable
• :markdown with variable