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)

mixinの後に中括弧がないことに注意してくださいat-breakpoint()。インデントするだけです。

于 2013-05-15T17:39:03.640 に答える
-3

問題が見つかりました。Susy は、SASS のインデント構文をサポートしていません。ブー！

@includeそれを修正するために、たくさんの中括弧、セミコロン、および s を追加しました。

更新: OK、問題はSASS 構文のサポートではありませんでした。インデントされた構文で中括弧を使用したのは私でした! 何らかの理由で、私の脳は、コード ブロックが mixin に渡されるので、中かっこで囲む必要があると判断しました。私のミスとスージーの開発者への謝罪.

于 2013-05-15T17:15:49.070 に答える