インソースマーケティングデザイン
2017.07.28 コーディング
[SCSS] px→vw、rem→vwのやり方
こんにちわ！
コーディングを担当しています、姿です。
暑い日が続きますね。
蒸し蒸しして、気温以上に暑く感じます。
暑さにめっぽう弱い私にはとてもつらい季節です。
早く涼しい秋になって欲しいです、、、
さて、先日とあるプロジェクトで、SCSSを使用してCSSのソースコードを書いたのですが、メディアクエリでPC用、スマホ用にスタイルを分ける様にしました。
使用する単位は、PC用はremかpx。スマホ用はvw。
ソースをガリガリ書いている最中にふと思いました。
「PC用のpxやremからvwに変換できたら、スマホ用作るの楽だな。」
そこで、Google先生にお伺い。
姿「先生！px→vwみたく単位を変更するにはどうしたらいいですか！？」
Google先生「はいよっ『1pxのpx部分を省いた数値を取得する方法』」
姿「先生！これじゃありません！！」
Google先生「はいよっ『単位の無い数値を%形式に変換』」
姿「おしいです！でもこれじゃありません！！」
Google先生「はいよっ……」
何度か聞きましたが、しっくりくる内容が出てきません。
私の検索の仕方が悪かったのか？？？ …まぁ、見つからないならば作ってしまえと思い、作ってみました。
@function pxToVw($pxValue) {
@return (($pxValue / $spBreakPoint) * 100) + vw;
}
// rem値をvw値に変換する
@function remToVw($remValue) {
$remVal: (($remValue * 10) / 1rem);
@return (($remVal / ($spBreakPoint / 1px)) * 100) + vw;
}
※$spBreakPointには、750pxが設定されています。
“10px”や”20rem”など、単位付きのままで入力します。出力値は”vw”付きです。
「px値をvw値に変換する」の方は、単純に変換したいpx値を画面幅(ここでは750px)で割った値に100をかけてます。
「rem値をvw値に変換する」の方は、rem値をpx値に変換した後にvwに変換する方法を取っています。
rem値に10をかけているのは、CSS側でbodyにフォントサイズを10px相当に設定しているためです。
とりあえず、これにてやりたかった変換方法が無事に作成できました。
