ベンダープレフィックスが面倒な人に贈る、常用Compass(Sass)ミックスイン

「-webkit-」「-moz-」といったベンダープレフィックス付きで複数書かなければならないCSSプロパティは面倒ですよね。Compassミックスイン使って楽しましょう。

@include border-radius(4px 4px 0 0);

例として上記border-radiusの記述で下記のようにCSS出力されます。

-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-ms-border-radius: 4px 4px 0 0;
-o-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;

ほか自分が常用してるものは下記のものです。

@include inline-block;
@include box-sizing(border-box);
@include box-shadow(0 0 5px $color);
@include text-shadow(0 0 5px $color);
@include opacity(0.5);
@include background(linear-gradient($white, $black));
@include transform(rotate(45deg));

いずれもCSSプロパティと同じ名前なので想像つくと思います。大体はカッコ内の中がそのままプロパティの値に入る形です。

自分はもう普通にCSS書くのがダルくてしょうがないレベルになっています。