Jade Mixins

[rubenmarcus]

Quem aqui usa jade?

Queria compartilhar alguns mixins que eu uso, e ver alguns legais que a galera use..

fiz esse pra inclusão de svg, ficou um pouco redundante mas o jade não deixa fazer includes dinamicos.. pelo menos a sintaxe no input ficou bem facil

mixin svgaddress
 include ../../assets/final/svg/address.svg 

mixin svgbilling
 include ../../assets/final/svg/billing.svg 


mixin svg(icon)
    case icon
        when "address"
           +svgaddress
        when "billing"
           +svgbilling


+svg('address')

Fiz um pra checkbox tambem:

mixin checkboxitem(val,desc)
 input(type="checkbox",id="#{val}",name="#{val}")
 label(for="#{val}")
  span
   | #{desc} 


+checkboxitem(val,desc)

Quero escrever um post mais pra frente sobre Jade, mas preciso montar meu portfolio primeiro...

Valeu

[lagden]

agora é pug!!!
problemas com trademark!!

[rubenmarcus]

Jade é um nome tao mais bonito =(

[felipefialho]

Todos meus projetos são em Jade, sabem como está essa alteração no nome?

Deveria os projetos antigos? Só os novos?

[lagden]

o próximo release será pug...
o antigos ficarão do jeito q está, mas com aviso de Deprecated

@rubenmarcus
eu acho o mixin algo tão particular de um projeto!!
Dificilmente reaproveito, apenas chupinho algumas idéias...

Tem esse de montar table.
O tableRow é bem específico do projeto que desenvolvi, mas da pra ajustar para outros...

mixin tableHead(cols)
  thead
    tr
      each campo in cols
        th #{campo}

mixin tableRow(dados, kind, cols)
  each row in dados
    tr(data-action=row[kind])
      each td, k in row
        if typeof(td) === 'object'
          each v, kv in td
            td(data-th=cols[kv]) #{v}
        else if k === 'ramo'
          td(data-th=cols[k])
            svg.icontable
              use(xlink:href='##{td}')
        else if k === 'pago'
          td(data-th=cols[k])
            if Number(td)
              svg.icontable
                use(xlink:href='#credit')
        else if cols[k]
          td(data-th=cols[k]) #{td}

mixin tableBody(dados, kind, cols)
  tbody
    +tableRow(dados, kind, cols)

mixin table(lista)
  +tableHead(lista.colsItems)
  +tableBody(lista.items, lista.kind, lista.colsItems)