Стиль именования вложенных элементов (Jade, HAML, Slim)

Question

Ищите решение, как использовать соглашение об именах SMACSS с jade, haml или slim template engine.

Ожидайте следующий нефритовый код:

.module
  .child
  .child

в качестве вывода я получу следующее:

<div class="module">
  <div class="child"></div>
  <div class="child"></div>
</div>

но я бы хотел достичь следующего результата:

<div class="module">
  <div class="module-child"></div>
  <div class="module-child"></div>
</div>

Есть ли решение для управления, как, например, я могу сделать это в SASS, я имею в виду избегать добавления строки 'module-' к каждому 'child' вручную?

ОБНОВИТЬ

Также приемлемые решения с Haml и Slim

Answer 1

Это самое близкое, что я получил от нефрита ( живая площадка здесь):

mixin e(elt)
  - var a = attributes;
  - var cl = attributes.class;delete attributes.class
  - var elt = elt ? elt : 'div' // If no parameter given
  if cl
    - var cl = parent + '-' + cl
  else
    - var cl = parent
  #{elt}&attributes({'class': cl}, attributes)
    block

- var parent = 'box'
+e('aside')#so-special
  +e('h2').title Related
  +e('ul').list
    +e('li').item: +e('a')(href='#').link Item 1
    +e('li').item: +e('span').link.current Item 2 and current
    +e('li').item#third(data-dash='fine', aria-live='polite') Item 3 not even a link
      | multi-line
      | block
    // - var parent = 'other' problem of scope I guess 
    +e('li').item lorem ipsum dolor sit amet

- var parent = 'footer'
+e('footer')(role='contentInfo')
  +e.inner © Company - 2014

Миксин по имени e выведет элемент, взятый в качестве параметра (по умолчанию div) с его атрибутами и содержимым, как есть, за исключением первого класса, который будет иметь префикс со значением переменной parent (или будет значение parent сам, если у него нет никакого класса)
Я предпочитаю использовать синтаксис jade по умолчанию для атрибутов, включая class и id, чем передавать множество параметров в миксин (этот не нужен, если это div, как с .sth textвыходной <div class="sth>text</div> а также +e.sth text будет выводить <div class="parent-sth>text</div>)
Mixin был бы короче, если бы ему не приходилось иметь дело с другими атрибутами (href, id, data-*, роль и т. Д.). Оставшаяся проблема: изменение значения parent не имеет никакого эффекта, когда оно имеет отступ. Это было с более простыми предыдущими попытками, поэтому я думаю, что это связано с областью действия переменных. Теоретически вы не хотите менять префикс для дочерних элементов, но на практике... Может быть, как второй необязательный параметр?

Вещи, с которыми у меня были проблемы во время игры с нефритом:

• атрибуты не работают должным образом. Теперь это &attributes(attributes), Благодаря выпуску нефритовых книг на GitHub
• но он выведет класс без изменений плюс префикс, так что мне пришлось удалить его (deleteв месте, где он был бы казнен нефритом

Answer 2

Несколько мыслей от меня: что не так с переменной?

- var myModule = 'module'
div(class="#{myModule}")
  div(class="#{myModule}-child")
  div(class="#{myModule}-child")

или объединить его с каждым:

- var myModule2 = 'foobar'
div(class="#{myModule2}")
  each idx in [0, 1, 2, 3]
    div(class="#{myModule2}-child") I'm child #{idx}

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

Чао Ральф

Answer 3

Вы должны быть в состоянии достичь этого с SASS. Если у вас установлена ​​последняя версия SASS, вы сможете использовать следующий синтаксис:

.module {
    &-child {

    }
}

Посмотрите эту статью для получения дополнительной информации о новых функциях SASS http://davidwalsh.name/future-sass