如何在具有字符串值的SCSS中使用math.sqrt
如何在具有字符串值的SCSS中使用math.sqrt
提问于 2022-07-25 09:50:18
我使用SCSS，有两个功能：
@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
我该怎么做？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-27 08:21:56
首先，您需要从units中去掉$side，以创建一个@function。
@use 'sass:math';
@function stripUnit($number) {
@return math.div($number, ($number * 0 + 1));
}stripUnit函数的学分属于Kitty Giraudel 和Miriam Suzanne。
现在，在您的value中使用返回的@function
@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(40px));
}P.S --为了找到和解决你的问题，我浪费了几乎1.5 hours。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73107222
复制相关文章
相似问题
腾讯云开发者
