1年前のSass/Compassを振り返ってみた

sass css

昨年末のブログを見てみたら、Sass/CompassでPass風のメニューを作って遊んでました。 当時はSass 3.2のリリース前で、あれこれとダーティハックをしていたので、最近のSass/Compassだとどうなるのか？と思ってアップデートしてみました。

この1年でSass/Compassがどう進化したのか、進化しなかったのか見てみます。

Sass 3.2: @content

1年前は無理矢理alpha版をインストールして使っていた@contentが正式に使えるようになりました。 今回使っているkeyframesの他は、メディアクエリなんかに活用できます。

Sass 3.2: 可変長配列

mixinの引数に可変長配列を指定できるようになったので、主にベンダープレフィックスの指定が楽になりました。

/* Before */
@mixin animation-name($names: $default-animation-name) {
  @include experimental(animation-name, unquote($names),
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

/* After */
$animation-support: -moz, -webkit, not -o, not -ms, not -khtml;
@mixin animation-name($names: $default-animation-name) {
  @include experimental(animation-name, unquote($names), $animation-support...);
}

SCSSのinterpolationバグがfix

前回ハマったSCSS形式での文字列埋め込みのバグはSass 3.2では改修済みです。

Compass 0.12: @include transition-property(transform) のプレフィックスが賢くなった

transition-property mixinにtransformなどのプレフィックスが必要なプロパティを指定した場合、 transition-property自体のプレフィックスと同じプレフィックスを自動でつけてくれるようになりました。 なので、前回自前で用意したmixinは不要になりました。

-moz-transition-property: -moz-transform;
-webkit-transition-property: -webkit-transform;
-o-transition-property: -o-transform;
transition-property: transform;

中身の実装としては、$transitionable-prefixed-values変数にプレフィックスが必要なプロパティを定義しておいて、 prefixed-for-transition()関数でそこに含まれるかどうかを判定しています。

$transitionable-prefixed-values: transform, transform-origin !default;

@function prefixed-for-transition($prefix, $property) {
  @if type-of($property) == list {
    $new-list: comma-list();
    @each $v in $property {
      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
    }
    @return $new-list;
  } @else {
    @if index($transitionable-prefixed-values, $property) {
      @return #{$prefix}-#{$property};
    } @else {
      @return $property;
    }
  }
}

IE10がリリースされて-msプレフィックスが不要に

IE10のリリース版ではCSS3 AnimationやTransitionから-msプレフィックスが外れたので、出力結果が減りました。

CSS Animationのmixinは？

前回がんばって自前で書いたわけですが、 1年経って@contentが使えるようになった今でも、Compassのリリース版にはCSS Animationのmixinがありません。 masterブランチにはあるので、次のリリースには入りそうですが、最近Compassはいまいちリリースが見えません。。Bourbonを使うのもいいかもしれません。

ということで

前回はSCSS約300行、コンパイル後のCSS約1550行でしたが、SCCS約270行、CSS約1210行に減りました。 差分は、SCCSはtransitionのプレフィックス対応や可変長配列の部分、CSSはmsプレフィックスを削ったところですね。 CSS Animationを自前ライブラリから削ると一気にSCSSが170行ぐらいになるので、Compass先生の正式リリースが待ち遠しいところです。