scss 和 less 如何在calc里使用变量

scss

一、方法

把变量名用#{}包起来:

 min-height: calc(100vh - #{$topNavHeight} - #{$tagViewHeight});

二、官方文档

自定义属性

我没有找到使用calc的示例，找到了自定义属性，试了一下，起作用。示例如下：

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

:root {
  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary;
}

三、啰嗦的话

我感觉我找的依据可能只是凑巧，只是测试发现可用，就用了。这，不是最理想的，如果有人发现官方文档的依据，希望能与大家分享，我将万分感谢（鞠躬）。

less

一、方法

把变量名用~''包起来，这里单引号和双引号都可以:

 @dd:50px;
    height: ~"calc(100% - @{dd})";