如何使这个 sass 工作[重复]答案

【问题标题】：how to make this sass work [duplicate]如何使这个 sass 工作[重复]
【发布时间】：2012-05-19 11:15:08
【问题描述】：

我没有 sass：

.rounded-corners {
  -moz-border-radius-topleft: 4px;

并且想做类似的事情：

$radius_size: 4;

.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;

或

.rounded-corners {
  -moz-border-radius-topleft: $radius_sizepx;

但是这些都行不通。这个调用的语法是什么？

谢谢

【问题讨论】：

标签： ruby-on-rails sass

【解决方案1】：

你使用的是什么版本的 sass？您的第一个示例 (-moz-border-radius-topleft: #{$radius_size}px;) 应该可以工作。它在 3.1.16 对我有用。

【讨论】：

sass (3.1.15, 3.1.10, 3.1.8, 3.1.7) sass-rails (3.1.5, 3.1.4, 3.1.2, 3.1.0)
奇怪的似乎 - 现在正在工作；可能是不相关的错误
酷。如果您需要知道您在应用程序中使用的 gem 的确切版本，并且正在使用 bundler，您可以使用bundle show <gemname>，例如bundle show sass 它会显示您正在使用的确切宝石。

【解决方案2】：

您的第一个选项（使用插值）看起来应该可以工作：

$radius_size: 4;
.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;
}

不过，一般来说，我认为最好将单位存储在变量本身中，因为当您在算术表达式中使用变量时，SASS 将在单位之间（如果可以的话）automatically convert：

$radius_size: 4px;
.rounded-corners {
  -moz-border-radius-topleft: $radius_size;
}

【讨论】：

【解决方案3】：

还可以考虑使用Compass。有了它你可以写：

$radius_size: 4px;
.rounded-corners {
  +border-top-left-radius($radius_size);
}

这会自动产生：

.rounded-corners {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  -o-border-top-left-radius: 4px;
  -ms-border-top-left-radius: 4px;
  -khtml-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}

【讨论】：