px を rem に変換する関数があります。例:
height: rem-calc(14px); // makes height: 1rem;
ここで、変数を使って計算してみたいと思います。例えば、次のようになります。
$switch-track-width: rem-calc(50px);
$switch-thumb-size: $switch-track-width / 2; // making it 25px or 1.7857rem in this case
それはうまくいかなかったので、別の方法を試しました:
$switch-thumb-size: ($switch-track-width / 2) + 0rem;
$switch-thumb-size: (#{$switch-track-width} / 2) + 0rem;
どちらの$switch-thumb-size例も機能しません。これで除算はできますが、 も取得できずtimes (*)、機能しませplus (+)んminus (-)。
2 つの変数で計算するときにも問題が発生します。例:
$switch-track-height: rem-calc(14px);
$switch-track-width: rem-calc(50px);
$switch-thumb-right: $switch-track-height - $switch-track-width;
次のように、関数をプロパティ内ではなく変数内に保持しますheight: rem-calc($switch-track-height);。
両方の例で SCSS 変数を使用して計算する方法を教えていただければ、非常に助かります。
前もって感謝します
ベストアンサー1
なんとか機能するものを見つけることができました。例えば:
$switch-thumb-size: rem-calc(10px);
$switch-track-height: rem-calc(20px);
$something: calc( ( #{$switch-thumb-size} - #{$switch-track-height} ) / 2 );
結果は次のようになります:
calc( ( 0.71428rem - 1.4285rem ) / 2 )
しかし、これには問題があります。まず、計算結果が常にマイナスになるはずであるとわかっていて、-変数の前に符号を追加すると、うまくいきません。例:
height: - $something; // Doesn't work
この方法の 2 番目の問題は、冗長な文字が大量に作成されることです。
なぜなら、実際にはheight: calc( ( 0.71428rem - 1.4285rem ) / 2 )CSS に次のコードではなく次のコードが記述されるからです。height: -0.35684rem