css - 如何在 HAML 中增加 Twitter Bootstrap 进度条？

Question

我刚刚开始学习使用 Sinatra、HAML 和 Twitter Bootstrap 构建小型网络应用程序。

在我的应用程序中，每 500 秒执行一次操作。我想在我的页面上放置一个进度条，指示下一个操作发生之前的剩余时间。现在，如果页面重新加载，该栏应该会更新。

我正在这样计算栏的进度:

-percentage = (Time.now.to_i.modulo(500))/5

现在，在我的原型(prototype) HAML 页面布局中，我有一个这样的进度条:

%div.progress.progress-striped.active
  %div.bar{:style => "width: 40%;"}

我正在努力找出将进度条的 width 属性设置为先前计算的进度百分比的正确语法。

Answer 1

事实证明我可以像这样简单地将百分比放在属性中:

%div.progress.progress-striped.active
  %div.bar{:style => "width: #{percentage}%;"}

我很困惑，因为我想我需要像这样“启用”Ruby 代码，类似于使用尾随 - 或 = 符号，如果我想评估HAML 中的 Ruby 代码。