JADE/PUG: Unable to use two mixins

Question

I am using mixin in my jade file. The requirement is to have two divs. If I create only a single div it renders but if I use two mixins to render the content I get error: "undefined jade_mixins.selectedImage-card is not a function"

Here is the jade code:

.container
        .allThumbs
          h2 All 
          .row
           mixin allImage-card(photo)
            .col-lg-4.col-md-4.col-sm-4.col-xs-6
              .imgThumb
                img.thumb(src=photo.URL, alt="")

        for photo in _allPhotos
          +allImage-card(photo)

        .allThumbs
          h2 Selected
          .row
            mixin selectedImage-card(photo)
            .col-lg-4.col-md-4.col-sm-4.col-xs-6
              .imgThumb
                img.thumb(src=photo.URL, alt="")

        for photo in _selected
          +selectedImage-card(photo)

Answer 1

The error is your indentation. Putting your code in a compiler results in the following error:

  > 24|             mixin selectedImage-card(photo)
--------------------^
    25|             .col-lg-4.col-md-4.col-sm-4.col-xs-6
    26|               .imgThumb
    27|                 img.thumb(src=photo.URL, alt="")

Mixin selectedImage-card declared without body

Give an additional leading space, after declaring the mixin, and it will work.

Ideally, you should define mixins at the beginning of the file, and refer them at a later stage as suggested in comments .

Answer 2

Put the mixin code outside the indentation.

Example:

mixin allImage-card(photo)
   .example 
      !{photo.name}

mixin selectedImage-card(photo)
   .test 
      !{photo.name}


.container
    -var _allPhotos = [{'name':'john'}, {'name': 'fred'}]
    -var _selected = [{'name':'luka'}, {'name': 'lisa'}]

    for photo in _allPhotos
      +allImage-card(photo)

    .allThumbs
      h2 Selected
      .row
    for photo in _selected
      +selectedImage-card(photo)