Sass/Compass 编译时不做数学运算答案

【问题标题】：Sass/Compass not doing math when compilingSass/Compass 编译时不做数学运算
【发布时间】：2014-11-20 11:52:10
【问题描述】：

很抱歉，这个问题描述性不是很强，但我不知道还能说什么，真的疯了。

在我的机器上，我安装了 grunt-contrib-compass，我的 package.json 中有这一行...

"grunt-contrib-compass": "1.0.1",

我的 grunt 文件运行正常，并且正在编译我的 SASS，但没有一个数学运算。当我提交到 Github 并且我的同事编译它时，数学是有效的，即使他和我的设置相同。通过 npm install 安装相同的 grunt 文件和相同的 npm 包。

为了测试什么是有效的，什么是无效的，我在我的 SASS 中设置了以下部分。我已经注释了我想要工作的行，其他的只是测试用例。

$hSpace: (20px, 24px, 30px, 30px, 40px, 60px);

.xxx{
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 10/2 * 1px;
    padding: nth($hSpace, 3)/2;   <---- This one
    padding: nth($hSpace, 3);
    padding: 30/2px;
    padding: 30/2 * 1px;
}

这是我运行 grunt 时的输出。

.xxx {
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 5px;
    padding: 30px/2;     <---- Produces this
    padding: 30px;
    padding: 30/2px;
    padding: 15px;
}

这就是我同事咕哝时的样子。

.xxx {
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 5px;
    padding: 15px;      <---- When it should produce this
    padding: 30px;
    padding: 30/2px;
   padding: 15px;
}

我们的设置似乎相同，所以我真的不明白为什么我的编译器无法工作。

非常感谢任何想法，即使它们只是猜测。

【问题讨论】：

你们都运行相同版本的 Sass 吗？我之前遇到过 Sass 版本与 compass 版本不兼容的问题。这引发了奇怪的错误。
无法在 sassmeister.com 上使用 LibSass 或 Sass（3.4、3.3 或 3.2）复制此内容。可能相关：stackoverflow.com/questions/24552869/…
另外，你真的需要在这里找到一个合适的标题。
感谢 cmets 的各位。是的，正如我所说，我知道标题不好，但我什至无法弄清楚问题与什么有关。它编译没有错误，但没有做数学运算。
@jonhobbs 我可以重现这个。我正在运行旧版本的指南针，grunt-contrib-compass: 0.5.0、sass: 3.2.10 和 compass: 0.12.2 我建议检查您的 3 版本号并确保它们与您的同事相同。

标签： css sass gruntjs compass-sass

【解决方案1】：

我可以使用上面评论中所述的版本号重现此错误。虽然我建议您按照我在 cmets 中的建议检查您的版本号，但您可以通过将 /2 更改为 * 0.5 来解决这个问题，这对我来说表明您使用的软件包版本与您的同事和不支持/分割代码的语法有bug。

$hSpace: (20px, 24px, 30px, 30px, 40px, 60px);

.xxx{
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 10/2 * 1px;
    padding: nth($hSpace, 3) / 2;
    padding: nth($hSpace, 3);
    padding: 30/2px;
    padding: 30/2 * 1px;
}

编译成

.xxx {
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 5px;
    padding: 30px/2;
    padding: 30px;
    padding: 30/2px;
    padding: 15px;

}

同时

.xxx{
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 10/2 * 1px;
    padding: nth($hSpace, 3) * 0.5;
    padding: nth($hSpace, 3);
    padding: 30/2px;
    padding: 30/2 * 1px;
}

编译成

.xxx {
    padding: 10px;
    padding: 10px/2;
    padding: 10/2;
    padding: 5px;
    padding: 15px;
    padding: 30px;
    padding: 30/2px;
    padding: 15px;
}

这是你的同事所拥有的。

【讨论】：