SASS Calcの補間

Question

私はSASSの変数を持っている：

$default-padding: 15px 

私はカルク機能を使用してCSSのwidthプロパティを設定するためにこれを使用します。

$ default-padding変数の値に基づいて、さまざまな計算を行います。たとえば、幅は100％ - （2 * $ default-padding）になります。左と右に詰め物があるので。

私は（ブルボンのストリップ単位方式を使用して）ローカル変数を設定しようとしています：私は、この変数の結果は、このユースケースで30pxすることが期待される

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px; 

、と私はそれを使用したいです以下のルールに：

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

これは動作しません、その結果のCSSは次のとおりです。

.popup { 
    width: calc(100% - strip-unit(15px)px); 
} 

A私が間違ってやっていることは何ですか？

Answer 1

2つのこと解決しなければならない：機能 名前が印刷されている理由

それはストリップユニットの機能のように思える

1. は（見つからなかったが$ default-padding-left-and-right（変数値を文字列に変換します）を代入するべきではありません。代わりに乗算を使用してください。

例：

@function strip-unit($num) { @return $num/($num * 0 + 1); } 

$default-padding: 15px; 
$default-padding-left-and-right: strip-unit($default-padding) * 2px; 

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

出力：

.popup { 
    width: calc(100% - 30px); 
} 

Answer 2

ブルボン機能があるstrip-unitsないstrip-unit - これを変更すると、あなたの問題