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

【问题标题】：How to use math.sqrt in SCSS with string value如何在 SCSS 中使用带有字符串值的 math.sqrt
【发布时间】：2022-07-27 16:21:56
【问题描述】：

我使用 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));

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

我该怎么做？

【问题讨论】：

标签： sass compass-sass scss-mixins

【解决方案1】：

首先，您需要从$side 中删除units，以创建@function。

@use 'sass:math';

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

stripUnit 函数的积分转到 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));
}

P.S - 我几乎浪费了1.5 hours 只是为了找到并解决您的问题。

【讨论】：