指南針在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的開發者道歉。