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のファイル内に記述した以降で設定が有効になるので、冒頭に記述すればすべて有効になります。