帮助 Sass 混合和变量（var 被忽略）答案

【问题标题】：Help with Sass mixin & variables (var is being ignored)帮助 Sass 混合和变量（var 被忽略）
【发布时间】：2010-12-08 18:49:55
【问题描述】：

我在 sass 部分中有以下 mixin：

=card-list
  width: 180px
  min-height: 150px
  display: -moz-inline-stack
  display: inline-block
  vertical-align: top
  margin: 5px
  zoom: 1
  *display: inline
  _height: 250px
  -moz-border-radius: 10px
  -webkit-border-radius: 10px

现在，当我尝试将其参数化并添加一些变量时，它们一直被忽略：

=card-list(!width=180px)
  width: !width
  min-height: 150px
  display: -moz-inline-stack
  display: inline-block
  vertical-align: top
  margin: 5px
  zoom: 1
  *display: inline
  _height: 250px
  -moz-border-radius: 10px
  -webkit-border-radius: 10px

我是这样使用的：

#content
  ul.characters > li
    +card-list(180px)
    background-color: black
    border: 1px solid black

问题是当我使用我的 mixin 的参数化版本时，宽度属性被忽略了，它甚至没有出现在 CSS 中。你能发现这段代码有什么错误吗？

如果我使用非参数化版本的 mixin，一切正常。

【问题讨论】：

标签： css haml sass compass-sass

【解决方案1】：

如果您在属性中使用变量，则需要使用=，而不是:。

=card-list($width: 180px)
  width = $width
  min-height: 150px
  display: -moz-inline-stack
  display: inline-block
  vertical-align: top
  margin: 5px
  zoom: 1
  *display: inline
  _height: 250px
  -moz-border-radius: 10px
  -webkit-border-radius: 10px

【讨论】：

没问题。在未来版本的 Sass 中，我计划摆脱对 = 的需求，只让人们使用 : 和变量。