{{ variable1 }} descrip1 .ui.basic.green.label

Question

我目前的.pug代码是这样的。

a.item
    .ui.green.horizontal.label something
    .ui.basic.grey.label 
        | {{ variable1 }} descrip1
    .ui.basic.green.label
      | {{ variable2 }} descrip2
    .ui.basic.grey.label
      | {{ variable3 }} descrip3

我想让各个ui元素的颜色根据变量的值动态变化。例如，如果变量1 > 30，那么ui元素的颜色就会是

ui.basic.green.label

而如果变量1 < 10，ui元素将是

ui.basic.red.label

有办法在.pug中做到这一点吗？我只是在尝试让每个组件动态化的时候得到多个div。作为一个说明，我尝试了

ui.basic.{{color_variable}}.label

或类似的东西，但很明显，这是错误的语法，它没有正确编译。

我对HTML和.pug很陌生，希望能得到帮助。

EDIT: 对我来说，行之有效的解决方法（在Sean的帮助下）是使用#键来转义字符。

.ui(class= "basic #{color_variable} label")

或者

.ui.basic.label(class= "#{color_variable}")

EDIT2：显然上面的内容已经被废弃了，请看下面Sean的回答。