如何创建一个 calc mixin 作为表达式传递来生成标签？

Posted 2023-03-06

【中文标题】如何创建一个 calc mixin 作为表达式传递来生成标签？

【英文标题】：How can I create a calc mixin to pass as an expression to generate tags?

【发布时间】：2012-06-05 06:22:14

【问题描述】：

我正在开发一个 sass 样式表，我希望在其中使用 calc 元素来动态调整某些内容的大小。由于calc 元素尚未标准化，我需要定位calc()、-moz-calc() 和-webkit-calc()。

有没有办法让我创建一个可以将表达式传递给的 mixin 或函数，以便它生成所需的标签，然后可以将其设置为 width 或 height？

【参考方案1】：

这将是一个基本的mixin with an argument，谢天谢地，表达式在支持的范围内不是特定于浏览器的：

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


.test 
  @include calc(width, "25% - 1em");

将呈现为

.test 
  width: -webkit-calc(25% - 1em);
  width: calc(25% - 1em);

您可能希望在不支持计算时包含一个“默认”值。

【讨论】：

这太完美了，我不知道你可以将属性传递给 mixin，但现在很有意义

不要随便添加前缀。 Opera 目前不支持calc()，但如果支持，则很有可能不带前缀。

如果您使用的是Bourbon，则内置了calc mixin。

我不明白为什么财产也需要转义？我还会添加 -moz-calc 作为值。大约 0.6% 的用户引用 caniuse.com 仍然支持它

@VolkerE.：此行为符合规范 - 选择器和属性名称中的变量必须使用 interpolation syntax

【参考方案2】：

Compass 提供 a shared utility 为此类场合添加供应商前缀。

@import "compass/css3/shared";

$experimental-support-for-opera: true; // Optional, since it's off by default

.test 
  @include experimental-value(width, calc(25% - 1em));

【讨论】：

不允许变量。怎么样：@include experimental-value(width, calc(100% - ($sidebarWidth + $padding)));？

没试过，这个有用吗？ @include experimental-value(width, calc(100% - #$sidebarWidth + $padding));

shared utility 已从指南针中弃用。

确实有！那可能是因为calc()已经成为主流：caniuse.com/#search=calc

【参考方案3】：

使用 unquote 功能可以很容易地使用 calc：

$variable: 100%
height: $variable //for browsers that don't support the calc function  
height:unquote("-moz-calc(")$variable unquote("+ 44px)")
height:unquote("-o-calc(")$variable unquote("+ 44px)")
height:unquote("-webkit-calc(")$variable unquote("+ 44px)")   
height:unquote("calc(")$variable unquote("+ 44px)")

将呈现为：

height: 100%;
height: -moz-calc( 100% + 44px);
height: -o-calc( 100% + 44px);
height: -webkit-calc( 100% + 44px);
height: calc( 100% + 44px);

您也可以尝试按照上面的建议创建 mixin，但我的做法略有不同：

$var1: 1
$var2: $var1 * 100%
@mixin calc($property, $variable, $operation, $value, $fallback)
 #$property: $fallback //for browsers that don't support calc function
 #$property: -mox-calc(#$variable #$operation #$value)
 #$property: -o-calc(#$variable #$operation #$value)
 #$property: -webkit-calc(#$variable #$operation #$value)
 #$property: calc(#$variable #$operation #$value)

.item     
 @include calc(height, $var1 / $var2, "+", 44px, $var1 / $var2 - 2%)

将呈现为：

.item 
height: 98%;
height: -mox-calc(100% + 44px);
height: -o-calc(100% + 44px);
height: -webkit-calc(100% + 44px);
height: calc(100% + 44px);

【参考方案4】：

另一种写法：

@mixin calc($prop, $val) 
  @each $pre in -webkit-, -moz-, -o- 
    #$prop: $pre + calc(#$val);
   
  #$prop: calc(#$val);


.myClass 
  @include calc(width, "25% - 1em");

我认为这是更优雅的方式。