Grunt-Contrib-Compass 不做数学答案

【问题标题】：Grunt-Contrib-Compass Not Doing MathGrunt-Contrib-Compass 不做数学
【发布时间】：2013-09-08 15:32:41
【问题描述】：

我以前从未使用过指南针。我一直在将 LESS 文件转换为 SCSS 并包括指南针。我有一个 grunt 设置，可以将它与我正在使用的其他一些任务一起编译。我之前有一个关于 SCSS Math 无法使用 Grunt-Contrib-Sass 工作的问题，该问题已得到解决。既然我正在使用 Compass 编译我的 SCSS，那么就没有像以前那样做数学了。这是输出的示例：

-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% / 50%;
border-radius: 50% / 50%;
display: inline-block;
margin-right: 10/10em;
padding-top: 5/10em;
width: 25/10em;
height: 19/10em;
border: 1px solid #ababab;
color: #ababab;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: 10/16em;

这是它的编译来源：

@include border-radius( 50%, 50% );
display: inline-block;
margin-right: #{10/10}em;
padding-top: #{5/10}em;
width: #{25/10}em;
height: #{19/10}em;
border: 1px solid $mediumgray;
color: $mediumgray;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: #{10/16}em;

我没有看到任何看起来他们会处理这个问题的选项。有没有人解决过这个问题？

【问题讨论】：

标签： css sass compass-sass gruntjs

【解决方案1】：

我不确定您是否完全了解 SASS 中的插值（我也没有）。在此处查看文档：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

我会这样做的方式如下（无关代码省略）：

margin-right: 10/10 * 1em;
padding-top: 5/10 * 1em;
width: 25/10 * 1em;
height: 19/10 * 1em;
font-size: 10/16 * 1em;

编译成

  margin-right: 1em;
  padding-top: 0.5em;
  width: 2.5em;
  height: 1.9em;
  font-size: 0.625em;

【讨论】：