読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Sassのmixinでベンダープレフィックスをカンタンにつける

Sass CSS

どうも!chuckです。

みなさんSass、使ってますか??使おうとしないとなかなか身につかないですよね(;・∀・)

僕の場合、Sassで使ってるのって「入れ子」機能ぐらいですかね。変数とか使いたいんですけど、まだまだ習慣化されていない感じがあります。

 

なので、今回は個人的に必要度の高いベンダープレフィックスを利用して、Sassの変数機能に慣れていきます。

 

そもそもの導入はこちら

chuckwebtips.hatenablog.com

 

 

 

そもそもベンダープレフィックスとは

ブラウザに最新のCSSを認識させるマークです。

www.htmq.com

 

これって、CSSとしてふつうに書くとけっこうめんどくさいですヽ(´Д`;)ノアゥア…

たとえばこんな感じ。

f:id:chuck0523:20150811073924p:plain

いやあ…なんというか苦行ですね。

これをSassを使ってカンタンにできたらいいよね!というたくらみです。

 

ミックスインのおさらい

さて、ミックスインについて。おさらいしておきます。使い方としてはこんな感じ。

f:id:chuck0523:20150811074018p:plain

@mixinで変数のように宣言しておいて、@includeで利用しています。

これをCSSに変換するとこんな感じ。

f:id:chuck0523:20150811074217p:plain

きちんと変換されていますヽ(=´▽`=)ノ

 

ミックスインでベンダープレフィックス

さて、いよいよベンダープレフィックスをミックスインでお手軽につけたいと思います。

まずは、変数として、ベンダープレフィックスたちを定義します。

f:id:chuck0523:20150811074439p:plain

ブラウザによっていくつか種類があります。

 

そして、この変数を利用して、ベンダープレフィックスを付与するミックスインを作ります。

f:id:chuck0523:20150811074529p:plain

こんな感じ。CSS3であるtransformperspectiveを例にあげました。

 

これらのミックスインを@includeで適用します。

f:id:chuck0523:20150811074626p:plain

 

全体像。

f:id:chuck0523:20150811074709p:plain

 

これをCSSに変換すると、このとおり!

f:id:chuck0523:20150811074742p:plain

めんどくさいベンダープレフィックスがずらりと自動生成されましたヽ(=´▽`=)ノ

 

参考にしたサイト様

css-happylife.com

 

まとめ

最近CSS3を使うことが多くベンダープレフィックスが必要なので、ミックスイン機能にはお世話になりそうです。こういう便利機能って、使っていかないと身につかないと思うので、積極的に取り入れていこうと思います。

では!

 

 Sassの使い方

chuckwebtips.hatenablog.com