2016.05.02

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

Category: Sass

Tags, , , ,

@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);

関連リンク

Category : Sass