1

我正在使用 Susy/Compass/SASS 在我当前的项目中创建一个简单的响应式网格。但是，Compass 编译器不会编译 Susy 的断点处 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.

如果发现与我的类似的先前问题表明这compass-susy-plugin是罪魁祸首。我已经删除了它（不确定我是否开始使用它）并再次安装 Susy gem 以确保安全，但我仍然收到错误。

有没有人遇到过这个或类似的问题？在此先感谢您的帮助！

4

2 回答 2

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()请注意， mixin后面没有大括号。只是缩进。

于 2013-05-15T17:39:03.640 回答
-3

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

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

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

于 2013-05-15T17:15:49.070 回答