Web production note

 【更新日 :

【Sass】Compassのミックスインでベンダープレフィックスを書き出す

Category:
Compass

Compassは2016年にサポートが終了しています。

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

Compassを使用して上記のように記述すると、cssに出力した時に以下のようにベンダープレフィックスを自動で書きだしてくれます。

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

個人的によく使うミックスインまとめ

@include box-sizing(border-box);
@include border-radius(0);
@include transition(all 0.5s);
@include background-size(13px 13px);
@include transform(translateY(0px) rotate(-45deg));
@include box-shadow(0 0 5px #ccc);
@include text-shadow(0 0 5px #ccc);

関連リンク