如何在 SCSS 中使用带有字符串值的 math.sqrt

Question

我使用 SCSS 并有 2 个功能：

@function get-size-in-units($size, $unit: px) {
  @return #{$size}#{$unit};
}

@function get-container-size($side) {
   @return math.ceil(math.sqrt(2 * math.pow($side, 2)));
 }

现在我像这样使用它：

get-size-in-units(get-container-size(40));

现在我需要 function get-container-size来处理字符串值。 我的意思是我想用'40px' 、 '40rem'等来称呼它，而不是用40

我怎样才能做到这一点？

Answer 1

首先，您需要从$side剥离units以创建@function 。

@use 'sass:math';

@function stripUnit($number) {
    @return math.div($number, ($number * 0 + 1));
}

stripUnit function 的学分归于Kitty Giraudel和Miriam Suzanne 。

现在在@function中使用返回的value

@function get-container-size($side) {
    @return math.ceil(math.sqrt(2 * math.pow(stripUnit($side), 2)));
}

完整代码

@use 'sass:math';

@function stripUnit($number) {
    @return math.div($number, ($number * 0 + 1));
}

@function get-container-size($side) {
    @return math.ceil(math.sqrt(2 * math.pow(stripUnit($side), 2)));
}

@function get-size-in-units($size, $unit: px) {
    @return #{$size}#{$unit};
}

然后你可以像这样使用它：

.container {
    width: get-size-in-units(get-container-size(40));
}

PS - 我已经浪费了将近1.5 hours来寻找和解决你的问题。