関数からSCSS変数を計算する方法

Question

私は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つの変数で計算するときにも問題があります。たとえば：height: rem-calc($switch-track-height);：

$switch-track-height: rem-calc(14px); 
$switch-track-width: rem-calc(50px); 
$switch-thumb-right: $switch-track-height - $switch-track-width; 

私は、変数内の代わりのような性質で機能を維持するためにprever。

誰かが非常に役に立つ両方の例でSCSS変数を使って計算する方法を教えてもらえますか。

ありがとうございます。

Answer 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番目の問題は、多くの冗長文字が作成されていることです。

それは実際に置くので：あなたのCSSのheight: calc((0.71428rem - 1.4285rem)/2)の代わり：[サス変数CSSカルク（）関数]のheight: -0.35684rem