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;

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

THX

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将在单位之间automatically convert（如果可以）：

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

如何让这个sass工作

3 个答案: