sassで計算式を作り、各フォントサイズを可変させたい。

実現したいこと

h2にのみ変数代入を成功させたいです。

前提

sassで変数と計算式を使って各フォントサイズを可変させたかったのですが、
h1は想定通りになりましたが、h2がh1と同じ結果になってしまいました。

該当のソースコード

css
ソースコード
$min-size: 53;
$max-size: 146;
$min-viewport: 375;
$max-viewport: 1440;

$slope: calc(( #{$max-size} - #{$min-size} ) / ( #{$max-viewport} - #{$min-viewport} ));
$intercept: calc( #{$min-size} - #{$slope} * #{$min-viewport} );
$fluid-size: calc( #{$slope} * 100vw + #{$intercept} / 16 * 1rem);
$clamp-size: clamp( #{$min-size} / 16 * 1rem, #{$fluid-size}, #{$max-size} / 16 * 1rem );

h1 {
font-size: $clamp-size;
}

h2 {
$min-size: 26;
$max-size: 42;
font-size: $clamp-size;
}

試したこと

h2 {
$min-size: 26;
$max-size: 42;
$slope: calc(( #{$max-size} - #{$min-size} ) / ( #{$max-viewport} - #{$min-viewport} ));
$intercept: calc( #{$min-size} - #{$slope} * #{$min-viewport} );
$fluid-size: calc( #{$slope} * 100vw + #{$intercept} / 16 * 1rem);
$clamp-size: clamp( #{$min-size} / 16 * 1rem, #{$fluid-size}, #{$max-size} / 16 * 1rem );
font-size: $clamp-size;
}

ここまで書けばうまくいきましたがあまり意味ないような気がしましたので、他にいい方法があれば教えてください。

コメントを投稿

0 コメント