このサイトでも使っているSVGのグラデーションを利用したボタンをミックスインにしてscss-partialsに追加しておいた。:hoverで少し暗くなり、:activeで凹むようになっている。button要素でもa要素でも使える。あと、だいたいスケーラブル。
Demo: _ellegant-button.scss Demo
.test {
@include ellegant-button(#39c, #fff);
}として背景色と前景色を指定してインクルードするだけ。SVGを使っていたり、枠線の色や1pxのハイライト等はすべてrgba()でどうにかしたりしているので、FirefoxやChrome、Safariでないとスクリーンショットのようにはならない。
scss-partialsには_context-reset.scssという実験的なpartialも追加した。これはインクルードしたセレクターのスタイルを全て初期値に戻すミックスイン。巨大なので乱用するとひどいことになるので注意。
例えばTwitterの新Embeddウィジェットやはてなスターのポップアップするコメントなんかだとblockquote要素が使われてたりして、Webサイトのスタイルとバッティングすることがある。そういうのを手軽に解消するのに使う。他には印刷向けスタイルシートをメインのスタイルシート・ファイルに混ぜる時なんかにも利用できると思う。
最近はdivdivspandivspanとかではないこういうマークアップを採用するウィジェットも増えてきたので必要そうかなと。本当はJavaScriptでゴニョゴニョするんだからウィジェット側でどうにかしてくれとか思っている。インラインのスタイルだと!important使いまくらないといけないので、シンプルなセレクターのCSSルールセットを追加してくれたりすれば良さそう。画面フラッシュしそうなのがアレなのでそうならないのかな。