Интеграция переменных в классы .pug - PullRequest
Новая
       19

Интеграция переменных в классы .pug

0 голосов
/ 01 мая 2020

У меня в настоящее время есть код .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

Я хотел бы сделать цвета отдельных элементов пользовательского интерфейса динамическими c на основе значений в переменных. Так, например, если variable1> 30, элемент пользовательского интерфейса будет 

ui.basic.green.label

, тогда как если variable1 <10, элемент пользовательского интерфейса будет </p> 

ui.basic.red.label

Есть ли способ сделать это в .pug? Я просто получаю несколько div-ов, когда пытаюсь сделать каждый компонент динамическим c. Как примечание, я попытался 

ui.basic.{{color_variable}}.label

или что-то в этом роде, но, очевидно, это неправильный синтаксис и он не компилировался должным образом.

Я очень новичок в HTML и .pug и любая помощь приветствуется!

РЕДАКТИРОВАТЬ: Решение, которое работало для меня (с помощью Шона), было экранирование персонажа с помощью клавиши #. 

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

или 

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

РЕДАКТИРОВАТЬ 2: Видимо вышеупомянутое устарело, пожалуйста, посмотрите на ответ Шона ниже.

1 Ответ

0 голосов
/ 01 мая 2020

Это возможно при использовании стандартного синтаксиса атрибута для классов вместо буквального синтаксиса class (или при их объединении).

Вот пример того, как чтобы сделать это с вашей разметкой.

Этот мопс - 

.ui.basic.label(class= color)

- скомпилирует этот HTML - 

<div class="ui basic label green"></div>

- если значение color Переменная мопса "green".

...