如何在 SASS 中计算百分比减去 px？

计算百分比和 px 之间的差异并不像 50% – 30px 那样简单。显然你会得到不兼容的单位错误。这是因为 SASS 无法对无法从一种单位转换为另一种单位的值执行算术运算。 SASS 不知道以像素或任何其他单位表示的“百分比 (%)”究竟有多宽。只有浏览器才能知道这些事情。

所以这里需要calc()函数。

关于 calc()： calc()函数允许我们对属性值执行数学运算。例如，我们可以使用 calc() 来指定宽度是两个或多个数值相加的结果，而不是声明元素宽度的静态像素值。

• 例子：

  .class{
      height: calc(30px + 50px);
  } 
  

  编译文件：

  .class {
    height: calc(30px + 50px);
  }

  但是为什么我们在这里需要这个?
  由于以下原因， calc()函数提供了更好的解决方案。我们可以组合不同的单位。具体来说，我们可以将百分比和视口单位等相对单位与像素等绝对单位混合使用。例如，我们可以创建一个表达式，从百分比值中减去一个像素值。

• 例子：

  .class {
      width: calc(50% + 30px);
  }
  

  编译文件：

  .class {
    width: calc(50% + 30px);
  }

  现在让我们来看看从 % 中减去 px 的情况。在我们的 SCSS 代码中使用calc()函数，我们可以轻松地对两个不同的单位进行减法运算。

• 例子：

  .class {
      height: calc(50% - 20px);
  }
  

  编译文件：

  .class {
    height: calc(50% - 20px);
  }

  有时，如果您的值在变量中，您可能需要使用插值将它们转换为字符串。

• 例子：

  $x: 50%;
  $y: 20px;
    
  .class {
    width: calc(#{$x} - #{$y});
  }
  

  编译文件：

  .class {
    height: calc(50% - 20px);
  }

注意： calc()函数可用于对数值属性值执行加法、减法、乘法和除法计算。具体来说，它可以与长度、频率、角度、时间、数字或整数数据类型一起使用。

例子：

.class {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg));
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

编译文件：

.class {
  width: calc(50vmax + 3rem);
  padding: calc(1vw + 1em);
  transform: rotate(calc(1turn + 28deg));
  background: hsl(100, calc(3 * 20%), 40%);
  font-size: calc(50vw / 3);
}