I can’t seem to find anyone that actually shows where to put mixin definition jade files and…
Jeff Thompson
11

Hey Jeff Thompson

No problem! Sure I can help 😀 So with mixin, you need to include the file that contains the mixin and then the file that is including can see those mixin within its scope. Order shouldn’t matter but I like to make sure that I include mixin at the top of the file so that I don’t get confused between them and actual include d content(I prefer to keep the two separate although you don’t have to).

For an example; let’s take a simple scenario where we have a page that includes a header that includes a mixin to show a title with given name. In a real use case, we may have a special structure for titles within our markup and a mixin will save us repeating ourselves.

Here is our simple page(index.jade);

html
head
body
include path/to/header/header
p. some content

And next this is our header.jade that includes the mixin ;

include path/to/mixins/bigTitle
header
+BigTitle('Awesome site')

And lastly, our actual mixin file;

mixin BigTitle(title)
h1(style='font-size: 120px')= title

Sometimes I believe the confusion may lie around the use of include . But if you think about how the compilation happens and that every time an include is used, the content of that file is being added to the file being compiled at that point, it may help. That is what makes it possible to have several mixin per file etc. You could also have content and mixin within one file that are include d. The output would be that the file has the mixin within scope and includes the content at the same time.

I hope I’ve written that clearly and that it helps you out 😀

Any other questions, don’t hesitate to ask 😊