如何在Jade模板中执行JavaScript数学？

Question

I want the lightness to be a function of order of item on the list

Here's the order variable

{{order}}

Here's the template language I'm trying to modify

.minicard(style="background-color:hsl(354,100%,{{(order * 2)+46}}%)")

What I'm basically trying to do is multiply order by 2 and add 46 to it.

{{order}} works but doing math within the curly brackets doesn't seem to. How do I do simple javascript in a jade template?

Answer 1

No need for JavaScript, you can do something like this:

- order = 10
- order = order * 2 + 45

.minicard(style="background-color:hsl(354,100%,"+order+"%;")

OR you can do it inline:

- order = 10

.minicard(style="background-color:hsl(354,100%," + (order * 2 + 45) + "%;")

Both should compile into:

<div class="minicard" style="background-color:hsl(354,100%,65%"></div>

See working example here - https://codepen.io/AdamCCFC/pen/pWoxXV