clover.blue

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;
}

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の「&」の扱い

追加された関数

また、気になった点があれば追記していきます。