Compass @import の優先順位

最近はまった Compass の @import の優先順位。

Compass の設定

/htdocs/config.rb

sass_dir = "css/"

ケース1

ディレクトリ構造

/htdocs/
  └ /css/
      ├ import.scss 
      └ /sample/
            ├ import.scss
            └ index.scss

記述内容

/htdocs/css/import.scss

.import1 {
    content: "/htdocs/css/import.scss";
}

/htdocs/css/sample/import.scss

.import2 {
    content: "/htdocs/css/sample/import.scss";
}

/TOFU/htdocs/css/sample/index.scss

@import "import.scss";

出力内容

.import2 {
    content: "/htdocs/css/sample/import.scss";
}

ケース2

ディレクトリ構造

/htdocs/
  └ /css/
      ├ import.scss 
      └ /sample/
            └ index.scss

記述内容

/htdocs/css/import.scss

.import1 {
    content: "/htdocs/css/import.scss";
}

/htdocs/css/sample/index.scss

@import "import.scss";

出力内容

.import1 {
    content: "/htdocs/css/import.scss";
}

ケース3

ディレクトリ構造

/htdocs/
  └ /css/
      └ /sample/
            └ index.scss

記述内容

/htdocs/css/sample/index.scss

@import "import.scss";

出力内容

Syntax error: File to import not found or unreadable: import.scss.

当然エラー。

結論

Compass がコンパイルするとき、@import の優先順番は下記っぽい。

1. 相対的なパスのファイル
2. Config に定義された CSS ディレクトリのルートのパスからファイル
3. 上記にファイルがなければエラー

仕組みとしてはユーザーフレンドリーだけど、実際に遭遇するとすげーわかんない...。