[英]SASS Calc Interpolation
I have a SASS variable: 我有一个SASS变量:
$default-padding: 15px
I want to use this to set a CSS width property using the calc function. 我想使用它来使用calc函数设置CSS width属性。
I have various calculations to make based on the value of the $default-padding variable. 我需要根据$ default-padding变量的值进行各种计算。 For Example, the width would be 100% - (2 * $default-padding). 例如,宽度为100%-(2 * $ default-padding)。 As there is padding on the left and on the right. 由于左侧和右侧都有填充。
I am trying to set a local variable (using Bourbon's strip-unit method): 我正在尝试设置局部变量(使用Bourbon的strip-unit方法):
$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px;
I would expect the result of this variable to be 30px in this use case, and I want to use it in the following rule: 我希望在此用例中此变量的结果为30px,并且我想在以下规则中使用它:
.popup {
width: calc(100% - #{$default-padding-left-and-right});
}
This doesn't work, the resultant CSS is: 这不起作用,生成的CSS为:
.popup {
width: calc(100% - strip-unit(15px)px);
}
Any ideas what I'm doing wrong? 有什么想法我做错了吗?
Two things: 两件事情:
Example : 范例:
@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});
}
Output: 输出:
.popup {
width: calc(100% - 30px);
}
波旁威士忌功能是strip-units
而不是strip-unit
-更改此选项可以解决您的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.