PUG как задать переменную в имени класса?

Question

[Adexs]

Не нашел на сайте пуг (мб плохо искал), как в миксине добавить в имя класса переменную? Например, чтобы к
.b-content-img-
Присваивались номера, т.е. .b-content-img-1 и т.д.?

Answer 1

[Олег]

img(class=`b-content-img-${number}`)

Comments

[Adexs]

mixin block(number, name)
				div(class="b-content, b-content-img-${number}")
					img.b-img(src="images/img-"+name+".gif")

+block(1, 1)

Прописывает как имя класса, т.е.
.b-content-img-${number}

Если сделать по аналогии с +name+ - ошибка при компиляции.

[Олег]

Adexs, У вас кавычки не те, правильно так:

mixin block(number, name)
        div(class=`b-content b-content-img-${number}`)
          img.b-img(src=`images/img-${name}.gif`)

+block(1, 1)

[Adexs]

Олег, поправил, все равно не распознает переменную.

[Олег]

Adexs, Не знаю тогда, должно все работать, вот пример.

Answer 2

[Алексей Ярков]

mixin test(param)
  div(class="b-content-img-#{param}")
    block

+test("test")
  h1 Test

Comments

[Иван]

Привет, можно вопрос?)

Где может пригодится миксины в pug?) Просто не понимаю..Использую pug чисто из-за синтаксиса и возможности разбить на разные файлы,одну страницу(я только учусь) и все, не могу представить себе ситуацию где возможно применить всю мощность pug..

[Алексей Ярков]

Иван, Вот выводите вы страницу со списком постов. У каждого элемента есть заголовок, картинка, короткий вступительный текст, еще какая-то инфа.
Таких элементов на страницу 20-30 штук.
Как выводить будете? Правильно! Миксином в цикле.

[Иван]

Алексей Ярков, Ну,походу я просто не дорос до такого) Спасибо)

[Алексей Ярков]

Иван,

mixin post(item)
  .block-post
    h1= item.title
    .img
      img(src="#{item.img}")
    p= item.short

- each item in [{title: 'Title 1', short: 'Short text...', img: 'https://habrastorage.org/files/4da/a0f/944/4daa0f944a4a413f92550632f74d2729.jpg'}]
  +post(item)

Потренируйтесь: html2jade.org

[Иван]

Алексей Ярков, Все,понял)) Для особо частых повторяющих элементов интерфейса,чтобы по 100 раз не писать,СПАСИБО!)

[Adexs]

Спасибо, но этот вариант и вариант от автора выше все равно выводятся как обычный текст, т.е. переменная не распознается.

[Алексей Ярков]

Adexs, в смысле не распознается?
Вот это:

mixin test(param)
  div(class="b-content-img-#{param}")
    block

+test("test")
  h1 Test

компилится в это:

<div class="b-content-img-test">
  <h1>Test</h1>
</div>

- - -
Что не так?

[Adexs]

Алексей Ярков, Компилится как

<div class="b-content-img-#{param}">
  <h1>Test</h1>
</div>

[Алексей Ярков]

Adexs, странный компилятор у вас )))
html2jade.org
Ну а вообще тогда как Олег
Кавычки на бэктики и # на $.

Answer 3

[Хатам Союнов]

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

- var class_name = 'my_class'
div(class="" +class_name )

Компилируется:
<div class="my_class">