やりたいこと
フォントサイズの計算を自動化したい。
PCの時:font-size: 26px;
SPの時:26:640(PCのデザイン幅)=x:480(SPのデザイン幅)
=>ディスプレイ幅が480pxの時、font-size:19.5pxになる。
※単位は全てpxです。
ベタがきで、
font-size:26 * 480px / 640とかくと
=>font-size:19.5pxと出力することができる。
しかし、これを@mixinで記述したい。
scss
1@mixin size($px) { 2 font-size: #{$px}px; 3 @include mq(sp) { 4 font-size: calc(#{$px} * 480px) / 640; 5 //=>動いていない。下記「試したこと」のセクションに試したことを記載。 6 } 7} 8 9.fz26 { 10 @include size(26); 11//=>本当はfont-size:19.5pxと出力させたいが、そのままの形で出力されてしまう。 12} 13 14たくさんclass名を指定する必要があるので@mixinでまとめないと不便。 15.fz24{@include size(24);} 16.fz15{@include size(15);} 17.... 18
試したこと(全てそのまま出力されてしまう)
scss
1font-size: calc(#{$px} * 480) / 640; 2font-size: calc(calc(#{$px} * 480px) /640); 3font-size: calc(#{$px} * 480px / 640); 4font-size: calc(#{$px} * 480 / 640px); 5//=>どの記述でもこのまま出力される
参考にしたサイト
https://qiita.com/mtmtkzm/items/2e3aef1b504ebcde5311
https://hyper-text.org/archives/2016/05/css_calc_function.shtml
答えをいただければとても助かります。
すみませんが、よろしくお願いします。
追記:
上記で記載しておりませんでしたが、
文中に出てくる@mq(sp)は、こちらの内容になります。
scss
1$breakpoints: ( 2 'pc': 'screen and (min-width: 640px)',//pc 3 'sp': 'screen and (max-width: 639px)',//sp 4) !default; 5@mixin mq($breakpoint: pc) { 6 @media #{map-get($breakpoints, $breakpoint)} { 7 @content; 8 } 9}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/28 07:08
2019/07/28 07:17
2019/07/29 10:41 編集