Susy的断点混合出现Compass编译错误

Question

我正在使用Susy/Compass/SASS在我当前的项目中创建一个简单的响应式网格。但是，Compass编译器不会编译Susy的断点混入。这是我的网格：

+border-box-sizing

$total-columns  : 3
$column-width   : 4.5em
$gutter-width   : 1em
$grid-padding   : $gutter-width
$container-style: fluid

$break-1: 6
$break-2: 10

body
    +container($total-columns, $break-1, $break-2)

.list
    +span-columns(3)
.detail
    display: none

+at-breakpoint($break-1) {
    .detail
        +squish(1)
        +span-columns(3)
    .list
        +span-columns(2 omega)
}

+at-breakpoint($break-2) {
    .detail
        +squish(1,1)
        +span-columns(5)
    .list
        +span-columns(3 omega)
}

当Compass尝试编译时，我得到一个错误：error screen.sass (Line 20 of _grid.sass: Invalid CSS after "($break-1) ": expected expression (e.g. 1px, bold), was "{") identical screen.css。

如果发现与我相似的a previous question，则表明compass-susy-plugin是罪魁祸首。为了安全起见，我已经删除了它(不确定我一开始就有)，并再次安装了Susy gem，但我仍然收到错误。

有没有人遇到过这样或类似的问题？提前感谢您的帮助！

Answer 1

Susy支持缩进式Sass语法。问题是您当前使用的是这两种语法的混合。试试这个：

@import "susy"

+border-box-sizing

$total-columns  : 3
$column-width   : 4.5em
$gutter-width   : 1em
$grid-padding   : $gutter-width
$container-style: fluid

$break-1: 6
$break-2: 10

body
    +container($total-columns, $break-1, $break-2)

.list
    +span-columns(3)
.detail
    display: none

+at-breakpoint($break-1)
    .detail
        +squish(1)
        +span-columns(3)
    .list
        +span-columns(2 omega)

+at-breakpoint($break-2)
    .detail
        +squish(1,1)
        +span-columns(5)
    .list
        +span-columns(3 omega)

请注意，at-breakpoint() mixins后面没有花括号。只要缩进即可。

Answer 2

我找到问题了。Susy不支持SASS的缩进语法。嘘！

我添加了大量的花括号、分号和@include来修复它。

更新： OK，问题是不支持SASS语法。这是我在缩进语法中使用大括号的原因！出于某种原因，我的大脑决定代码块需要用大括号括起来，因为它将被传递给一个mixin。我的错误和我对Susy的开发者的道歉。