我找不到解决这个问题的方法:我需要在SASS中设置一个最大在2个值之间的margin,一个为 calc()
另一个是常规的px值。它将是这样的东西。
$calculation: calc(15vw + 10px);
.cssClass {
margin-right: max($calculation, 100px);
}
有什么办法可以创建一个SCSS函数 或者有什么方法可以让它工作?先谢谢你
SASS中的 max()
函数对不同单位的值不起作用。
也就是说,你可以使用CSS的 max()
函数,用你自己的Sass版本覆盖。
// Override Sass function
@function max($numbers...) {
@return m#{a}x(#{$numbers});
}
$calculation: calc(15vw + 10px);
.cssClass {
margin-right: max($calculation, 100px);
}
...上面的SCSS编译成这个CSS。
.cssClass {
margin-right: max(calc(15vw + 10px), 100px);
}
归功于 肖剑秋在GitHub上 感谢你指出了这个解决方案。必须创建一个自定义函数是一个不幸的Sass编译器怪癖,尽管它显然已经在Dart Sass中得到了修正。