Sassでベンダープレフィックス付きのドット柄背景の作り方

Question

CSSで円のずれたドット柄背景を作る際、background-imageのradial-gradientを下記のように複数指定しました。

background-image: radial-gradient(#000, transparent 1px), radial-gradient(#000, transparent 1px);
background-image: -webkit-radial-gradient(#000, transparent 1px), -webkit-radial-gradient(#000, transparent 1px);
background-image: -ms-radial-gradient(#000, transparent 1px), -ms-radial-gradient(#000, transparent 1px);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;

このままだと冗長になるため、Sassでコードの省略化を測りたいのですが、Mixinで実装しようにもなかなかに上手くいきません。
ご助力いただけると幸いです。

Answer 1

Sassを使用する場合は、直にベンダープレフィックスは書かずにwebpackやgulpでautoprefixerを使用するのが一般的です。
また、GUIの変換ソフトや各エディタの拡張機能でも同じ事は出来ると思うので、そちらを利用しても良いかもしれません。

それかもっと手軽に行うなら、コードの量は減りませんがemmetにもベンダープレフィックスの自動付与機能があるので、入力の手間は減らす事ができると思います。