Sass mixin 变量参数错误

Question

我在使用可变参数时遇到了一个不一致的错误。

项目中有几个混合器接受可变参数，其中一个是：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

正如您所看到的，它接受可变参数。但在我们工作的某些机器上无法正常工作。在无法工作的机器上，我们会收到以下错误信息："Invalid CSS after "...x-shadow ($args": expected ")", was "...) {"。我们所有人都在使用相同版本的SASS，Sass 3.3.7（Maptastic Maple）。除了SASS版本之外，是否有其他原因导致此错误？我们都在尝试解决这个问题时使用完全相同的代码库。请注意保留html标记。

- L4DD13

---

我看到你也参考了文档中的例子。http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments 我认为你需要发布更多当前实现的内容，才能指出问题。 - Nico O

请仔细确认您是否正在使用Sass 3.3进行编译。可变参数是3.2中的新功能。另一个应用程序（如Compass）的旧版本可能会导致您降级到旧版本。 - cimmanon

你能确认$args后面的三个点是三个点而不是省略号字符（…）吗？我知道机会很小，但我经历过更奇怪的事情。 - rockerest

@rockerest 是的，它们肯定是点。 - L4DD13

请执行 sass --trace path/to/your/file 命令，并将输出信息展示给我们。 - Alex Guerrero

Answer 1

应该是：

@mixin box-shadow($shadows) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

你的省略号看起来可能会引起问题。

此外，您可能希望考虑利用SASS Mixin库来执行许多常见的供应商前缀工作。 我使用的是Bourbon- http://bourbon.io/

还有各种其他好处，例如将像素转换为rem等函数。

更新

我刚刚意识到您正在尝试使用变量参数。在这种情况下，从文档中看来，语法是正确的。确保您正在使用SASS 3.2+。

http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released/

我正在使用SASS 3.3.6，使用您的代码时没有遇到这个错误。

我建议在您的项目中使用Gemfile，并从Gemfile中构建。这将确保您真正使用了正确的gems，并且每个人都处于相同的设置。

以下是适用于您的代码的Gemfile：

# Install these gems by running 'bundle install'.
# Install bundle from these instructions: http://bundler.io/

source 'https://rubygems.org'

# Using Compass Alpha release due to compatability with SASS 3.3+
gem 'sass', '3.3.6'
gem 'compass', '~> 1.0.0.alpha.19'
gem 'bourbon', '4.0.1'
gem 'neat', '1.6.0'

- Michael Giovanni Pumo