Question

我有一个将px转换为rem的函数。例如：

height: rem-calc(14px); // makes height: 1rem;

现在我想用变量来计算它。例如：

$switch-track-width: rem-calc(50px);
$switch-thumb-size: $switch-track-width / 2; // making it 25px or 1.7857rem in this case

那不行，所以我尝试了别的东西：

$switch-thumb-size: ($switch-track-width / 2) + 0rem;
$switch-thumb-size: (#{$switch-track-width} / 2) + 0rem;

两个$switch-thumb-size示例都没有效果。现在这是分裂，但我也无法让times (*)，plus (+)和minus (-)工作。

我在用2个变量计算时也遇到了问题。例如：

$switch-track-height: rem-calc(14px);
$switch-track-width: rem-calc(50px);
$switch-thumb-right: $switch-track-height - $switch-track-width;

我希望将函数保留在变量中而不是像height: rem-calc($switch-track-height);这样的属性中。

如果有人可以告诉我如何用两个例子中的SCSS变量进行计算，那将非常有帮助。

提前致谢

Answer 1

我设法找到一些有用的东西。例如：

$switch-thumb-size: rem-calc(10px);
$switch-track-height: rem-calc(20px);
$something: calc( ( #{$switch-thumb-size} - #{$switch-track-height} ) / 2 );

这导致：

calc( ( 0.71428rem - 1.4285rem ) / 2 )

但它有问题。首先，如果您知道您计算的内容应始终为负数，那么您在变量前面添加-符号将无效。例如：

height: - $something; // Doesn't work

我对这种方法的第二个问题是它会产生很多冗余字符。

因为它实际上会在您的css中添加：height: calc( ( 0.71428rem - 1.4285rem ) / 2 )而不是：height: -0.35684rem

Answer 2

实际上可以输入一个编译为数字的公式：（第一个示例摘自https://sass-lang.com/guide）

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
div {
  width: $icon_width + 10px * 2;
}

编译为

article[role="main"] {
  float: left;
  width: 62.5%;
}
div {
  width: 60px;
}

这仅适用于兼容的设备。否则就像

height: calc( 100vh - #{$head_height} - #{$main_height});

如何用函数中的SCSS变量计算

2 个答案: