SASS計算器插值

Question

我有一個SASS變量：

$default-padding: 15px 

我想用這個來設置使用計算功能的CSS width屬性。

我有基於$ default-padding變量的值進行各種計算。例如，寬度將是100％ - （2 * $ default-padding）。由於左側和右側有填充。

我想設置一個局部變量（使用波旁的帶單元法）：

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

我希望這個變量的結果，在這種使用情況下30PX，我想用它在以下規則：

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

這不起作用，得到的CSS是：

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

一呃想知道我做錯了什麼？

Answer 1

兩件事情：

1. 好像帶單元的功能沒有找到（爲什麼打印功能 名out）
2. 你不應該插入$ default-padding-left-and-right（它將變量值變成一個字符串） - 使用multiply來代替。

例子：

@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 - 改變這應該解決您的問題