コンパスは、Susy's at-breakpoint mixin - sass、compass-sass、susy-compassでエラーをコンパイルします。

現在のプロジェクトでは簡単なレスキューグリッドに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)
}

コンパスがコンパイルしようとすると、エラーが表示されます。 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の宝石を安全に再インストールしましたが、まだエラーが出ます。

誰かがこれまたは同様の問題を抱えていましたか？あなたの助けを前もってありがとう！

回答：

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() ミックスイン。ちょうどインデント。

私は問題を発見した。 SusyはSASSのインデントされた構文をサポートしていません。ブー！

私はたくさんの中括弧、セミコロン、および @includeそれを修正する。

更新： 問題は ない SASS構文のサポート インデントされた構文で中括弧を使用しました。何らかの理由で、私の脳は、コードブロックがミックスインに渡されるため、中括弧内にある必要があると判断しました。私の間違いとSusyの開発者への私の謝罪。