请求将Haml代码转标准HTML并解释(1..4).each do |i|语法

转换后的标准HTML代码 #

<div class="container">
  <div class="circle circle--1">
    <div class="circle__inner">
      <div class="circle__wrapper">
        <svg class="circle__content" viewbox="0 0 100 100">
          <path d="M50,10 a40,40 0 0,1 0,80 a40,40 0 0,1 0,-80"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="circle circle--2">
    <div class="circle__inner">
      <div class="circle__wrapper">
        <svg class="circle__content" viewbox="0 0 100 100">
          <path d="M50,10 a40,40 0 0,1 0,80 a40,40 0 0,1 0,-80"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="circle circle--3">
    <div class="circle__inner">
      <div class="circle__wrapper">
        <svg class="circle__content" viewbox="0 0 100 100">
          <path d="M50,10 a40,40 0 0,1 0,80 a40,40 0 0,1 0,-80"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="circle circle--4">
    <div class="circle__inner">
      <div class="circle__wrapper">
        <svg class="circle__content" viewbox="0 0 100 100">
          <path d="M50,10 a40,40 0 0,1 0,80 a40,40 0 0,1 0,-80"></path>
        </svg>
      </div>
    </div>
  </div>
</div>

对(1..4).each do |i|的解释 #

这是Haml嵌入的Ruby循环语法，拆解细节：

• (1..4)：Ruby的范围对象，代表包含1、2、3、4的整数序列
• .each do |i|：遍历这个范围的循环，每次迭代时，当前的数值会被存入变量i
• 循环内部的Haml代码会被重复执行4次，每次执行时#{i}会被替换为当前的迭代数值，最终生成4个带circle--1到circle--4类名的元素，实现批量生成结构一致、类名带序号的重复元素。

内容的提问来源于stack exchange，提问作者Magic Veekthor