サイズ自在なSCSSわぷー、できました。 @wckansai2015

わぷーわぷー

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 参加者募集中です

bnr-wcwidth

Advertisements

コメントを残す