gulpでSASS/SCSSをコンパイルする時にベンダープレフィックスを自動で追加する。

CSSを書いていると登場する「ベンダープレフィックス」。「いちいち確認して追加するのが面倒臭い!」と思ったこともあるのでは。今回はSASS/SCSSをgulpでコンパイルする時に自動でベンダープレフィックスを追加してくれるpostCSSプラグインを紹介します。

ベンダープレフィックスを自動で付与するプラグイン

そもそもベンダープレフィックスとはなんぞや?という人もいるかと思うので簡単に説明を。

ベンダープレフィックスとは、簡単に説明すれば「ブラウザーのベンダーがCSS3の拡張機能を実装するのに使用する識別子」となるのですが、要はCSSの表示がブラウザによって違ってしまうといった誤動作を防ぐため、各ブラウザに対応した接頭辞をつけてあげよう。ということです。

例えばですが、

X軸に100px動かしてくれ、というCSSですが、これにベンダープレフィックスをつけるとこんな感じになります。

それぞれのブラウザごとに接頭辞をつけることで対応します。それぞれのプロパティに対してつけないといけないので、いちいちつけていると面倒くさいですよね。

※あくまでCSS3に先行実装されている機能を使うためにつけているものなので、例えばwidthとかheightとかごく一般的なものにまでつける必要はないです。

とこんなわけで、「SASS/SCSSのコンパイル時にこういうベンダープレフィックスを自動でつけてくれるといいのになあ。」と思っていたところpostCSSのプラグインで

autoprefixer

というものがあるそうなので今回導入してみました。

導入方法

まずは、postCSSを入れていない人もいるかと思いますので、postCSSから導入します。これによって様々なpostCSSプラグインを利用できるようになります。

※node.jsとnpmが既にインストールされている前提で書いています。

続いてautoprefixerをインストールします。

これでインストールは完了です。最後にgulpfile.jsを設定します。

これで設定は完了です。実際にコンパイルをするとこんな感じになります。

ただベンダープレフィックスを付与するだけでなく、プロパティによっては昔の機能を追加してくれたりもして、ブラウザの対応を促進してくれます。

Social Share Button