ユニットを使用した乗算

Question

ユニットに2つの値を掛けようとすると、予期しないエラーが発生します。

$test: 10px; 

.testing{ 
    width: $test * $test; 
} 
result: 100px*px isn't a valid CSS value. 

Answer 1

2つのpx値を乗算することはできません。それを行うためのより良い方法は、関数ですが、あなたはそれを達成するためにそれを追加使用する必要があります： - SASSで単位を掛ける

$test: 10px; 

@function calc-width($value1, $value2) { 
    @return $value1 + $value2; 
} 

.testing { 
    width: calc-width($test, $test); 
} 

Answer 2

は物理学 /工学/化学/で単位を掛けるように動作します[ここに科学を挿入します] 。

（https://www.sitepoint.com/understanding-sass-units/でこれについての詳細を参照）

2つの画素値を乗算する、エリア、ない距離である、あなたは^ 2をPX取得します。

あなたは何ができますか？ピクセルを乗算することが確実な場合は、関数を使用して1ピクセルで除算します。

$test: 10px; 

@function multiply-px($value1, $value2) { 
    @return $value1 * $value2/1px; 
} 

.testing { 
    width: multiply-px($test, $test);//100px 
} 

あなたが事前に使用することがありますどの単位がわからない場合、あなたは常に$値1の単位を取得するように、$値2からの単位を取り除くことができます。

（https://css-tricks.com/snippets/sass/strip-unit-function/でその上の詳細を読む）[理解-SASS単位]で

$test: 10in; 

@function strip-unit($number) { 
    @if type-of($number) == 'number' and not unitless($number) { 
    @return $number/($number * 0 + 1); 
    } 

    @return $number; 
} 

@function multiply-use-first-unit($value1, $value2) { 
    @return $value1 * strip-unit($value2); 
} 

.testing { 
    width: multiply-use-first-unit($test, $test);//100in 
} 

Answer 3

//try this 

$test: 10; 

.testing{ 
    width: $test * $test px; 
}