指南针在Susy的断点mixin编译错误

Question

我在当前项目中使用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) 
} 

当指南针尝试编译，我得到一个错误：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 s来解决它。

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