Where can I read good tutorials on how Haml and Slim template engines work?

Question

HTML

Good afternoon.
I'm doing regular layout (although I'm already familiar with preprocessors like Sass+compass). But at the moment, the task arose to transfer a static html site to a static site generator. My choice fell on Middleman. This generator uses erb as a template engine by default, and also understands Haml and Slim. I started making templates in Slim, although I still look towards Haml, as it seems to me more understandable. However, I came across the fact that I do not understand at all how to work with variables, cycles in template engines. I would like to read in an accessible language, with a large number of examples, and preferably in Russian, about template engines in general and about data in particular.
Since I have a year and a half experience as a layout designer and I have never encountered template engines before, and loops with variables are not a trivial task for me. I have an idea, but I don't see it in practice. For example, I don’t understand how to implement the site’s navigation menu so that the page on which we are located is highlighted and ceases to be a link. I will be glad for any help.
Do I understand correctly that Slim and Haml use Ruby syntax? Do I need to know it in order to work with template engines. Thank you.

Answer 1

Slim is very simple. Works on indents.
There is a variable @orders (Array with orders)

- @orders.each do |order|
  = order.title
  br
  = order.price
  .class#id(style="background: yellow;")
    - if order.price > 200
      p Это тег p и цена больше 200
    - else
      h2 Это тег h2
      span(style="color: red") А тут мы вставим прайс из руби кода внутри строки #{order.price} вот так

You put "equal" when it is necessary for the user to show helpers or data from the variable.
You put "Dash" when it is not necessary. Using loops and if else checks
We don't write a div if it has a class or an id.
Syntax as in css

.class -  пишется с точкой перед названием класса
.header-menu

#id - id пишется через хэш
#menu
#toggle-menu

can be combined
if you want native syntax, write in brackets
This is not all, but I hope a little clear.

Answer 2

slim differs from haml, perhaps, only by the absence of unnecessary percent symbols (%). What could be clearer there?
No, you don't need to know ruby. Write on slim to yourself and do not suffer. The logic there is very simple, everything is tied to indents.