わぷーわぷー
CSSわぷー
わぷーのCSS版を先日、WCK2015実行委員の一員のミスミさんがGPL2+で公開されましたが、実は今WCKのサイトをスマホで見るとページ幅が少しずれてしまっています。
CSSわぷーは width:400 なのでそのままだとはみ出てしまってるんですね……
よし、それならサイズを簡単に変えられるようにしよう！
CSSわぷーはWordPress本体やわぷーと同様に100% GPL2+で公開されています。せっかくなので、今回は変数一つ($wapuu-scale)変えるだけでサイズ自在なSCSSにしてみました。
0
SCSSなのでクラス内やメディアクエリー内でimportすることによってクラスや閲覧環境に合わせたサイズのわぷーを表示するCSSも簡単に出力できるのです。
製作に当たって、1400行のCSSを当初はpxの後に変数掛ければいいかな……と甘く見てたら変数をいれるとborder-radiusで/が除算として扱われることが発覚し#{ }で囲うのに苦労しました……
さて、苦労した後に気付いたのですが、これってよく考えればプリプロセッサを用いなくてもCSS3のtransform:scale(n)した方が楽で、CSSも増やすことなく、更にはHTMLのdata属性とか使ってスケーリングすることも出来たのはないでしょうか……
岡本さんのWebComponent版にもそっちが流用出来そうな気がしなくもありません……
今回作ったものはサンプル付きでGitHubにて公開中です。
ライセンスはもちろんGPL2+を継承しています。ご自由にお使いください。
※なお、CSSわぷーについては翻訳祭りのときに教えてもらいましたw
WordCamp Kansai 参加者募集中です
