@mixinでSPコーディングをちょっとラクにする方法

SPコーディングの際、レスポンシブ表示対応の一環でフォントサイズもデバイスに合わせて伸縮できると、デザイン全体のバランスを保つことが出来ますよね。

font-size: calc(24 * (100vw / 750)); //横750pxの時のフォントサイズが24px

上記のようにcalcで記述すると実装可能なのですが…sassのmixinを使うとメチャクチャ楽なので、方法をご紹介します！
sassについてはネット上に沢山出回っていますので、ここでは割愛します。「Sassってなに？」という方は、先ずは以下の記事あたりを参照されてはいかがでしょうか。

CSSの代わりにSassを使って、コードのメンテナンス性を高めよう！

①変数を定義

@function get_vw($size, $viewport:750){
 $rate: 100 / $viewport;
 @return $rate * $size * 1vw;
}

コーディングの際、基本的にはフォントや余白サイズなど各要素をデザインに合わせて行いますよね。ちなみに、上記はSPデザイン横750pxの場合。
640pxの場合は以下になります。

@function get_vw($size, $viewport:640){
 $rate: 100 / $viewport;
 @return $rate * $size * 1vw;
}

変更するのはviewportの数値だけです。

②変数をmixinに渡す

@mixin fz_vw($font_size:10){
 font-size: $font_size * 1px;
 font-size: get_vw($font_size);
}

上記の「fz_vw」の部分は変数を呼び出すための名前なので、自由に設定できますが、分かりやすく且つ簡潔な名称が良いですね。

③sassに取り込む

エリア内のフォントサイズが、横750pxデザインで28pxだった場合。

p {
       text-align: center;
       @include fz_vw(28);
       line-height: 2;
       margin: auto;
   }

sass上では、たったこれだけの記述でOK。楽ですよね！
コンパイルされたcssでは、下記のように計算された状態で書き出されます。

p {
 text-align: center;
 font-size: 28px;
 font-size: 3.73333vw;
 line-height: 2;
 margin: auto;
}

これを応用して、各々パラメータを別途設ければdivや画像サイズにも対応できちゃいます。

@mixin pts_vw($parts_size){
 width: $parts_size * 1px;
 width: get_vw($parts_size);
}

divや画像サイズはどちらもwidthで記述できるものなので、私は上記のように「パーツ」として設定してます。これなら画像でもボックスでも紛らわしくないですよね。

.txt {
         @include pts_vw(580);
         @include fz_vw(24);
         line-height: 1.8;
         margin: auto;
    img {
    @include pts_vw(240);
    margin: auto;
   }
}

sassに取り込む場合も同様です。
規模の大きなサイトにもなれば、記述が少し減るだけでも意外と工数削減になりますよ！ぜひ試してみて下さい。