Здравствуйте.
На самом деле здесь нет однозначного ответа и правил, когда что использовать. Часто например в русскоязычном сообществе можно услышать мнение , что мол mixins решают, а include стоит использовать только в редких случаях, например для подключения на страницу этих самых миксинов, однако я не разделяю в полной мере данную точку зрения.
Сам я занимаюсь вёрсткой сайтов, пишу, что использую сейчас:
extends core/layout.pug
block vars
- var pageTitle = 'Название'
- var pageDescription = 'Описание'
- var pageKeywords = 'Ключевые слова'
- var userState= 'logout'
block content
Данный код у меня идёт в начале типовой страницы. Как видно вначале я подключаю базовый шаблон(layout) на который подключаю: миксины, bemto, HEAD с содержимым, скрипты(перед закрытием body) и тому подобное(ниже есть пример).
Далее у меня идёт набор переменных. если взять последнюю переменную, то можно понять, как это может быть удобно(в данном случае когда имеет несколько состояний: залогинен пользователь или нет).
Можно подобным образом вынести в шапку страницы кучу переменных и затем уже не так важно, что вы будете дальше использовать: миксины или инклюды. В зависимости от переменных можно писать условия и в инклюдах и в миксинах.
Конечно больше я всё же использую миксины, возможно привык. Но вообще здесь куча вариантов, даже например в том, в каком виде передавать значения в миксинах. Я всем желаю не бояться Pug.js а начать писать на нём многостраничный сайт и вскоре вы сами всё поймете, что для вас удобнее.
Как писал ранее, сам я использую библиотеку миксинов bemto, мне нравится, но использовать её не обязательно, это больше индивидуально.
Осталось рассказать про block
Вначале стоит начать использовать block только в шаблоне(layout) , вот например у меня(сопоставьте с примером выше):
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")
Это вариант моего шаблона, который я использую для типовой страницы(смотрите первый пример).
Верстая, вскоре научитесь передавать block в миксины, это элементарно(Илья Ростопка привёл пример), жизнь заставит научиться :)
