Sass、Compassのバージョンアップに伴い(sass 3.4, compass 1.0)
- Data
- 2015/03/05
- Tag
Sassのmixinなど色々作っていたのですが。
しばらくバージョンアップなどしていなかったうちに
色々と仕様が変わっていたので、
自作mixinの作り直し + 仕様が変わった点などをまとめたいと思います。
※ 自作mixinも最新のsass,compassに合わせて修正済みです。(2014-12-17 現在)
Sass - グローバル変数が変更できない
ローカルからグローバルの変数が通常の書き方では変更できなくなりました。
変更する際には、!globalを使います。
3.2
$color: white;
.test{
$color: black;
color: $color;
}
3.4
$color: white;
.test{
$color: black !global;
color: $color;
}
- [参考] Sassの変数スコープと!global
Compass - border-radiusの仕様変更
角丸の一括指定ができなくなったようです。
3.2
@include border-radius(0 2px 0 0);
3.3
@include border-top-right-radius(2px);
Compass - ブラウザサポートの変数記述の仕様変更
下記のような古いブラウザの対応を指定しておく変数が軒並み変わっています。
0系
$legacy-support-for-ie6
$experimental-support-for-webkit
1系
$supported-browsers: ("chrome", "firefox", "ie", "safari", "opera", "ios-safari", "android");
$browser-minimum-versions: ("opera": "11", "ie": "6");
-
$supported-browsers
には配列で対応するブラウザを指定します。 -
$browser-minimum-versions
にはブラウザが対応するバージョンを指定します。
バージョンの確認
compassで対応しているブラウザとバージョンは、下記を実行することで確認できます。
@debug browsers();
@debug browser-versions(ios-safari);
-
browser-versions
にはバージョンを確認したいブラウザ名(browsers
で確認した文字列)を指定します。
バージョンごとの条件分岐方法
例: IE7以下のみの場合 ↓
0系
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
}
1系
@if support-legacy-browser("ie", "7") {
}
webkitの古いバージョンでのlinear-gradient先行実装の記述
iPhoneの古いバージョンなどで-webkit-gradient()
の記述を出力するには、
$supported-browsers
にandroidを追加すると出力されます。
$supported-browsers: ("android");
Compass - sprite-pathの仕様変更(?)
調べ切れていないのですが、システムからの絶対パスでファイルが指定されるようになっていました。
下記のようにimage-url
を使っていたのですが、
パスが変わったしまったため、おかしくなっていたのでsprite-urlに変更しました。
0系
image-url(sprite-path($map))
1系
sprite-url($map)
Sass3.4 変更点・追加点
&について
BEMを採用して作るときには&の書き方などを工夫することで便利に作れるようになっているようです。
* [参考] BEMという命名規則とSass 3.3の新しい記法
* [参考] Sass3.3.0の「&」の扱い
追加された関数
- [参考] Sass3.4 変更点・追加点を眺めた
- 追加されたselector function
また、気になった点があれば追記していきます。