用于写出此值的Sass语法

Question

我只是在最近的一个项目中采用了Sass，并试图让以下代码为圆角工作，这是不工作的。我该如何指定它，才能将每个圆角设置为8px？

$radius_size:8px;
.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;
  -webkit-border-top-left-radius: #{$radius_size}px;
  border-top-left-radius: #{$radius_size}px;
  -moz-border-radius-topright: #{$radius_size}px;
  -webkit-border-top-right-radius: #{$radius_size}px;
  border-top-right-radius: #{$radius_size}px;
}

thx

Answer 1

你只是把它变得过于复杂了！

$radius_size: 8px;
.rounded-corners {
  -moz-border-radius-topleft: $radius_size;
  //... and so on ...
}

Answer 2

1. 似乎是在插入两个'px‘部分。
2. 您可以在不使用#{}的情况下使用变量

$radius_size: 8px;

.rounded-corners {

    -moz-border-radius-topleft: $radius_size;
    -webkit-border-top-left-radius: $radius_size;
    border-top-left-radius: $radius_size;
    -moz-border-radius-topright: $radius_size;
    -webkit-border-top-right-radius: $radius_size;
    border-top-right-radius: $radius_size;
}

此外，请查看this site以在线测试sass