発生している問題・エラーメッセージ
sassにて、clamp関数を用いたFluidタイポグラフィを計算するmixinを作成しました。
scss
1@use 'sass:math'; 2 3@mixin clampFontSize($min-size, $max-size){ 4$min-viewport:375; 5$max-viewport:1440; 6 7$slope:math.div(($max-size - $min-size),($max-viewport - $min-viewport)); 8$intercept:$min-size - ($slope * $min-viewport); 9$fluid-size:#{$slope * 100vw}+#{math.div($max-size, 16)}; 10$clamp-size:clamp( 11 math.div($min-size, 16)*1rem, 12 $fluid-size, 13 math.div($max-size, 16)*1rem 14); 15font-size: $clamp-size; 16}
ところがブラウザ側では
font-size: clamp(0.9375rem, 1.220657277vw1.75, 1.75rem);
と表示されてしまい、適用はされませんでした。(実際には警告マークと横線が入っています。)
sassではvwとpxの計算が出来ないのかと思い、以下のようにvwとpxの値を別の変数に入れ、変数同士を計算するよう書きかえたところうまくスタイルが適用されました。
scss
1@mixin clampFontSize($min-size, $max-size){ 2... 3$fluid-size-vw:$slope * 100vw; 4$fluid-size-px:(math.div($intercept, 16)*1rem); 5$clamp-size:clamp( 6 math.div($min-size, 16)*1rem, 7 $fluid-size-vw + $fluid-size-px, 8 math.div($max-size, 16)*1rem 9); 10font-size: $clamp-size; 11}
無事スタイルは適用されたのですが、sassではpxとvwの計算は出来ないものなのでしょうか。CSS変数では最初の方法でうまくいったので、同じやり方でsassでも行おうとしたところできませんでした。
公式のドキュメントにもそれらしいところが見つからなかったのでこちらにて質問させていただきます。
初歩的な質問で大変恐縮ですが、お力を貸していただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。