SASS创建函数,对margin进行最大和最小的处理。

问题描述 投票:1回答:1

我找不到解决这个问题的方法:我需要在SASS中设置一个最大在2个值之间的margin,一个为 calc() 另一个是常规的px值。它将是这样的东西。

$calculation: calc(15vw + 10px);

.cssClass {
    margin-right: max($calculation, 100px);
}

有什么办法可以创建一个SCSS函数 或者有什么方法可以让它工作?先谢谢你

sass
1个回答
0
投票

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中得到了修正。

© www.soinside.com 2019 - 2024. All rights reserved.