Условия if/else в pug

#html5 #jade #pug

Есть блок с svg и нужно менять содержимое в зависимости от переменной, код:

mixin container(svg)    
.logo-box
    if svg == first
      svg.class__first
    else if svg === second
      svg.class__second
    else if svg === third
      svg.class__third
    else
      svg.class__fourth
+container(first)
+container(second)
+container(third)


Проблема заключается в том, что неважно какое значение я пишу в миксине container()
всегда отображается svg.class__first?
    

Ответы

Ответ 1

Синтаксис pug, вроде как, гласит что нужны кавычки. 

mixin container(svg)    
  .logo-box
      if svg=='first'
        svg.class__first
      else if svg=='second'
        svg.class__second
      else if svg=='third'
        svg.class__third
      else
        svg.class__fourth


+container('first')
+container('second')
+container('third')


Пример на CodePen (View Compiled HTML)


Ответ 2

Небольшое дополнение к соседнему ответу.

Код в pug является обычным кодом javascript.

Без кавычек first, second, third считаются переменными и, так как они нигде не объявлены,
их значением будет undefined.

Убедиться в этом можно добавив следующее условие:

if(typeof(first) == 'undefined')
  +container(first)


И в этом случае будет выведено всего два блока.

Так как все переменные равны undefined, и передаются тоже, то вполне работает равенство
undefined === undefined.

Для исправления можно воспользоваться решением из соседнего ответа: отказаться от
переменных и использовать строки.

Либо объявить переменные и присвоить им нужные значения.