CSS calc()函数中的 SASS 变量
原文:https://www . geesforgeks . org/sass-变量-in-css-calc-function/
CSS 本身是一种很好的网页设计语言，但是样式表变得越来越复杂、庞大，甚至更难维护。这就是像 Sass 这样的预处理器发挥作用的地方，它帮助我们使用 CSS 中甚至不存在的特性。
calc()函数是一个以单个表达式为参数，以表达式的值为结果的函数。表达式可以是任何简单的表达式，包括基本的算术运算符，如加法、减法、乘法和除法。
我们可以使用 calc()函数的唯一地方是在值中，也可以用于某些属性的一部分。 calc()CSS 函数允许我们在指定 CSS 属性值的同时执行计算，如<长度>、<频率>、<角度>、<时间>、<百分比>、<数字>或<整数>。
calc()函数是在 CSS 规范中定义的，因为 calc()的数学表达式与萨斯算法冲突。
进场:
在 calc()函数内部使用 Sass 变量:CSS 中的变量能够为不同的元素提供不同的值，但是 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);
}
版权属于：月萌API www.moonapi.com，转载请注明出处
