CSS calc()函数的SASS 变量

CSS 本身是一种很好的网页设计语言，但是样式表变得越来越复杂、越来越大，甚至更难维护。这就是像 Sass 这样的预处理器发挥作用的地方，它可以帮助我们使用 CSS 中甚至不存在的功能。

的计算值()函数是一个函数，它的单个表达式作为它的参数和取表达式的值作为结果。表达式可以是任何简单的表达式，包括基本的算术运算运算符，如加法、减法、乘法和除法。

我们可以使用 calc()函数的唯一地方是值和某些属性的一部分。
calc() CSS函数允许我们在指定 CSS 属性值的同时执行计算，例如 、、、、、 或 。

calc()函数在 CSS 规范中定义，因为 calc() 的数学表达式与 Sass 的算术冲突。

方法：

在 calc()函数使用 Sass 变量： CSS 中的变量可以为不同的元素设置不同的值，但 Sass 变量一次只能有一个值。
Sass 中的变量是命令式的，这意味着如果我们使用一个变量然后改变它的值，那么之前的使用将保持不变。
在 Sass 中，变量最常见的用途是将变量直接放入 Sass 样式表中，但有时这样做并不是唯一需要做的事情。在某些情况下，CSS 函数内部的插值语法是必要的。
Calc() 不是由 Sass 编译的，而是由浏览器本身编译的，因此它需要在函数正确写入所有值。
插值意味着只是用其字面量值替换占位符，因此在将 Sass 处理为 CSS 的情况下，所有对变量的引用可能都在设置插值。

有时，除非使用#{}语法明确指定插值，否则 Sass 处理器不会执行替换。
CSS calc()函数的 Sass 变量是使用保留符号 ($) 定义的
下面给出了在 CSS calc()函数中使用 Sass 变量的简单实现：

例子：

$a: 40%; 
$b: 10px; 
    
.class { 
  height: calc(#{$a} - #{$b}); 
}

编译文件：

.class {
 height: calc(40% - 10px);
}