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

【问题标题】：What is the simplest way to divide a variable in SASS?在 SASS 中划分变量的最简单方法是什么？
【发布时间】：2017-07-31 16:09:14
【问题描述】：

我想将一个 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
}

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

感谢您的帮助！

【问题讨论】：

您已经在吸气剂中将其除以二，我很难理解您的问题。最简单的方法是使用破折号和你想要除以它的数字。
@Sqnkov 抱歉，有点混乱； 30px 在 getter 中除以二，我希望将结果（15px）再除以二

标签： css twitter-bootstrap sass

【解决方案1】：

你很亲密。这是您必须删除的 map-get 上的插值问题。您可以看到编译后的 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
}

【讨论】：

【解决方案2】：

在新的 SASS 版本中，math.div 代替了分隔符 (/)。例如$col-padding-xs: #{map-get(math.div($grid-gutter-widths, xs), 2)};

它使用两个数字并将它们相除。

来源：https://sass-lang.com/documentation/breaking-changes/slash-div

【讨论】：