When to use in pug mixins, when to block, when to include?

Question

HTML

When to use in pug mixins, when to block, when to include? I don’t understand what to use when, everything seems to be clear with includes, and blocks and mixins cause confusion

Answer 1

Hello.
In fact, there is no single answer and rules for when to use what. Often, for example, in the Russian-speaking community, you can hear the opinion that they say mixins decide, and include should be used only in rare cases, for example, to connect these same mixins to the page, but I do not fully share this point of view.
I myself am engaged in the layout of sites, I write what I use now:

extends core/layout.pug

block vars
  - var pageTitle = 'Название'
  - var pageDescription = 'Описание'
  - var pageKeywords = 'Ключевые слова'
  - var userState= 'logout'

block content

I have this code at the beginning of a typical page. As you can see, first I connect the base template (layout) to which I connect: mixins, bemto, HEAD with content, scripts (before closing the body) and the like (there is an example below).
Next I have a set of variables. if you take the last variable, you can understand how convenient it can be (in this case, when it has several states: is the user logged in or not).
You can similarly put a bunch of variables in the page header and then it’s not so important what you will use next: mixins or includes. Depending on the variables, you can write conditions in both includes and mixins.
Of course, I still use mixins more, maybe I'm used to it. But in general, there are a lot of options here, even, for example, in what form to pass values ​​​​in mixins. I wish everyone not to be afraid of Pug.js, but to start writing a multi-page site on it, and soon you yourself will understand everything that is more convenient for you.
As I wrote earlier, I myself use the bemto mixin library, I like it, but it's not necessary to use it, it's more individual.
First, you should start using block only in the template (layout), for example, for me (compare with the example above):

include ../bemto/bemto
include   mixins

doctype html
html(lang="ru")
  block vars
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta( name="format-detection" content="telephone=no")
    link(href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,700,700i&subset=cyrillic" rel="stylesheet")
    title #{pageTitle}
    meta(name='description', content= pageDescription)
    meta(name='keywords', content= pageKeywords)
    link(rel="stylesheet" href="css/bundle.min.css")
  body
    block content


    +b.overlay(id="overlay")

    include ../blocks/product-card-modal
    include ../blocks/cart-modal
    include ../blocks/login-modal

    block scripts 
      script(src="js/bundle.min.js")

This is a variant of my template that I use for a typical page (see the first example).
When laying out, soon learn how to pass block to mixins, this is elementary (Ilya Rostopka gave an example), life will make you learn :)

Answer 2

1. Inside a mixin to get the children you pass to it
2. Inside a template that will extend another template in the future, to get the children from the template that extends that template.
3. Inside a template that extends to pass the children of
Examples 2 and 3 here: https://pugjs.org/language/inheritance.html
And here is the example for 1

mixin foo()
  div.bar
    block

+foo()
  div.foo Hello world

At the output we get

<div class="bar">
  <div class="foo">Hello world</div>
</div>

well, or also available in the docks, but a little more complicated: https://pugjs.org/language/mixins.html