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

所以地图值必须是错误的类型。有没有简单的方法把它作为一个数字，所以我可以在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 
}