在SASS中划分变量最简单的方法是什么？

Question

我想将 SASS 变量（这是一个映射值）除以二，如下所示：

$grid-gutter-widths: (
  xs:  30px,
  sm:  30px
  ...
);

$col-padding-xs:  #{map-get($grid-gutter-widths, xs)/2}; // returns 15px

div {
  padding-right: $col-padding-xs / 2; // returns 15px/2
}

不幸的是，我期望padding-rightvalue 是7.5px，但是它不执行除法，而是返回中间带有斜杠的字符串。然而这似乎有效：

$col-padding-xs: 15px;

div {
  padding-right: $col-padding-xs / 2; // returns 7.5px
}

所以map值一定是错误的类型。有没有一种简单的方法将其转换为数字，以便我可以在 SASS 中对其进行简单的数学运算？

感谢您的帮助！

Answer 1

你们非常接近。这是您必须删除的地图获取上的插值问题。您可以看到编译后的 css 的codepen 。

$grid-gutter-widths: (
  xs:  30px,
  sm:  30px
);

$col-padding-xs:  map-get($grid-gutter-widths, xs) / 2; // returns 15px

div {
  padding-right: $col-padding-xs / 2; // returns 7.5px
}