如何将表达式传递给使用 Sass 变量的 calc() mixin

Posted 2023-03-06

【中文标题】如何将表达式传递给使用 Sass 变量的 calc() mixin

【英文标题】：How can I pass an expression to a calc() mixin that uses Sass variables

【发布时间】：2013-05-15 16:30:31

【问题描述】：

我设置了一个 mixin 来进行跨浏览器计算，

@mixin calc($property, $expression...)  
  #$property: -moz-calc(#$expression); 
  #$property: -o-calc(#$expression); 
  #$property: -webkit-calc(#$expression); 
  #$property: calc(#$expression); 
 

我也有一个变量。

$line: 12px;

我希望能够在其中使用一个变量。

@include calc(width, "30% - ( $line * 2) ) ");

但我不确定这是否是最好的方法。

【问题讨论】：

没有理由为 Opera 添加前缀，因为 Opera 根本不支持 calc()。当他们最终支持它时，完全没有理由期望它被添加前缀。

可能重复访问***.com/questions/40739695/…

这能回答你的问题吗？ Sass Variable in CSS calc() function

【参考方案1】：

您需要对传递给 mixin 的值使用字符串插值：

.foo 
  @include calc(width, #"30% -  #$line * 2");

输出：

.foo 
  width: -moz-calc(30% - 24px);
  width: -o-calc(30% - 24px);
  width: -webkit-calc(30% - 24px);
  width: calc(30% - 24px);