我有一个SASS变量:
$default-padding: 15px
我想使用它来使用calc函数设置CSS width属性。
我根据$ default-padding变量的值进行各种计算。例如,宽度为100% - (2 * $ default-padding)。因为左侧和右侧有填充。
我正在尝试设置一个局部变量(使用Bourbon的strip-unit方法):
$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);
}
任何想法我做错了什么?
答案 0 :(得分:2)
两件事:
示例:
@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);
}
答案 1 :(得分:0)
波本语功能为strip-units
而非strip-unit
- 更改此功能可解决您的问题