曾经有一段简单的代码摆在我的面前，但是我没有重视😤，等到了搞砸的时候🤕才后悔莫及😱，尘世间最痛苦的事莫过于此......不行，我编不下去了🤮。
不废话了。首先，Look一下这段代码：
$height: 70px;
.main {
height: calc(100vh - $height);
}
它的本意是，我有一个变量
$height，表示70像素的高度，在样式名为main的元素上，用calc()方法，通过计算，设置其高度。那怎么计算呢，是用100vh获取到屏幕的高度，然后减去我之前设置的变量$height的高度，即减去70个像素。
但是，如果按照这么写，编译后的代码是这样的：
变量被编译成了字符串
就是说，$height编译成了字符串，而不是我们想要的70px。
那怎么解决呢？要用插值表达式，格式是#{$variable}，代码如下：
$height: 70px;
.main {
height: calc(100vh - #{$height});
}
如此这般，就达到了我们的目的：
成功.png
--（完）--
参考了《解决在sass中使用calc不能包含变量的问题》 曾经有一段简单的代码摆在我的面前，但是我没有重视?，等到...
问题 在less中，使用calc(100% - 7px)或者calc(100% - 7rem)的结果都是calc(...
在写style时，calc是经常用到的计算函数，当使用calc时，如果参数中有变量怎么用呢？ 如下代码： $sid...
1. calc基本使用 calc在css3中用于动态计算长度值，calc()中接受数学四则运算，运算的结果为计算后...
微信小程序开发使用计算样式calc的坑 （calc设置无效）wxss样式中如果要使用calc计算宽度或高度需要注意...
函数变量 calc()函数支持 "+", "-", "*", "/" 运算；
CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的...
导出变量和函数calc.js 导入变量和函数，并加以使用 另一种导入方法 默认导出（多个函数或变量只能导出一个默认...
使用#{}将变量括起
本文标题：scss---在calc中使用变量
本文链接：https://www.haomeiwen.com/subject/ewqwkktx.html
网友评论