Compass:ベンダープレフィックスの出力制御

goto_jp 233views 更新:2015年10月30日

CSSグラデーションなど、ブラウザごとに記述が変わるものをCompassは自動サポートしてくれますが、スマホ専用Webアプリなどブラウザを考慮する必要がないケースもあります(そうでなくてもOpera対応とかぶっちゃけいらない)

ムダなベンダープレフィックスをOFFにする設定をすることができます。

入力Sass例

@import "compass";
.sample1 {
  @include ellipsis(no-wrap);
}

// ブラウザサポート設定
$legacy-support-for-ie: false; //IEのサポートOFF
$experimental-support-for-microsoft: false; //-ms のベンダープレフィックスOFF
$experimental-support-for-mozilla: false; //-moz のベンダープレフィックスOFF
$experimental-support-for-opera: false; //-o のベンダープレフィックスOFF

.sample2 {
  @include ellipsis(no-wrap);
}

出力CSS

.sample1 {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.sample2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Sassのファイル内に記述した以降で設定が有効になるので、冒頭に記述すればすべて有効になります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません