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

ass CSS

古一Green

2020-04-07

我有一个将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;

我prever保持功能类似属性的变量内，而不是：height: rem-calc($switch-track-height);。

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

提前致谢

第4099篇《如何使用函数中的SCSS变量进行计算》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
神无 2020.04.07

实际上可以输入一个编译为数字的公式：（第一个示例取自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});

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android