css - 在 sass 中连接一个数字和“%”

Question

我想使用 SASS 执行以下操作：

width: #{$percent}%;

where$percent是一个包含数字的变量。如果$percent等于 50，则预编译的 CSS 将是：

width: 50%;

我应该使用什么语法？

Answer 1

乘以 1%：

$percent: 50

.foo
  width: $percent * 1%

结果：

.foo {
  width: 50%;
}

Answer 2

如果有人正在寻找以下代码的 SCSS 答案将完美运行，只需使用 css calc。

$percent: 50

.foo{
   width: calc(#{$percent} * 1%)
 }