如何在Pug中遍历变量字符并为其设置样式

当然可以用循环实现，还能保证生成的HTML简洁，同时兼容绝大多数邮件客户端。

实现思路 #

1. 用Pug的each循环遍历验证码字符串的每个字符
2. 复用重复的内联样式，减少代码冗余
3. 保持表格布局（邮件客户端对表格的兼容性远优于div布局）

Pug代码示例 #

table(style='border-spacing: 6px; border-collapse: separate;')
  tr
    each char in locals.code
      th(style='padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 18px; font-weight: normal; text-align: center;')= char

关键细节说明 #

• 加上border-collapse: separate是为了兼容Outlook等老旧邮件客户端，确保单元格间距生效
• 所有样式都用内联写法，避免使用CSS类（邮件客户端普遍不支持外部样式或内部样式表）
• 可根据需求调整padding、font-size等参数优化视觉效果
• 无论验证码长度多少，循环都会自动生成对应数量的带方框字符单元格

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