css - 在 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-right 的值是 7.5px 但是它不执行除法而是返回一个中间有斜杠的字符串。然而，这似乎有效:

$col-padding-xs: 15px;

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

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

感谢您的帮助!

Answer 1

你们很亲近。这是您必须删除的 map 上的插值问题。你可以看到 codepen对于编译的CSS。

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