Question

我正在使用Susy / Compass / SASS在我当前项目中使用简单的响应式网格。但是，Compass编译器不会编译Susy的at-breakpoint mixin。这是我的网格：

+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的缩进语法。 BOO！

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

<强>更新好的，问题是不支持SASS语法。这是我在缩进语法中使用花括号！出于某种原因，我的大脑决定代码块需要在括号中，因为它将被传递给mixin。我的错误，并向Susy的开发者道歉。

在Susy的at-breakpoint mixin上编译错误

2 个答案: