如何在 HAML 中增加 Twitter Bootstrap 进度条？答案

【问题标题】：How do I increment a Twitter Bootstrap progress bar in HAML?如何在 HAML 中增加 Twitter Bootstrap 进度条？
【发布时间】：2013-01-27 16:24:02
【问题描述】：

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

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

我是这样计算进度条的：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

我很困惑，因为我认为我需要在这种情况下“启用”Ruby 代码，类似于使用结尾的 - 或 = 符号，如果我想在 HAML 中评估 Ruby 代码。

【讨论】：