ruby-on-rails - 如何使这个 sass 工作

Question

我有非 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;

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

谢谢

Answer 1

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

Answer 2

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

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

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

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

Answer 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;
}