如何在 HamlJS 中的文本前添加空格

Question

我需要在 "Sign Up" 之前添加一个简单的白色 space，以便在图标和文本之间添加一个 space。

%a{ href: "#" }
  %i.fa.fa-user
    Sign Up

是否存在添加 whitespace 而 Haml 编译器无法将其识别为缩进的方案？我将 gulp-haml 与 visionmedia/haml.js 编译器一起使用。

Answer 1

我认为更好的方法是为图标添加边距。为此，向图标添加 class（我在这里使用 .app-signup-icon）

%a{ href: "#" }
  %i.fa.fa-user.app-signup-icon
    Sign Up

然后在 css 文件中定义带有边距的 css 规则：

.app-signup-icon {
  margin-right: 10px;
}