[Sass & Compass] Compass: Cross-Browser Support Configuration

公開日: 2014/07/17
更新日: 2018/11/14

Compass が内部で良きに計らってくれている部分をコントロールする設定。

ベンダープレフィックスだったり、特定ブラウザ向けのハックを出力するかに影響する。
_config.scss のようなパーシャルファイルに設定をまとめておき、インポートするのが一般的なよう。

例えば Compass の mixin で内部から呼ばれている has-layout mixin を見てみると、$legacy-support-for-ie の設定を見て出力していることが分かる。

=has-layout($approach: $default-has-layout-approach)
  @if $legacy-support-for-ie
    @if $approach == zoom
      +has-layout-zoom
    @else if $approach == block
      +has-layout-block
    @else
      @warn "Unknown has-layout approach: #{$approach}"
      +has-layout-zoom

見えないところで仕事をしてくれている。

補遺

初期値や項目など、こちらの一覧表がわかりやすい。

一連の SASS / Compass 記事がすごい力作。こちらで基本を覚えました。