如何组合 2 个 SASS 函数，因为它们使用不同的计算几乎做同样的事情？答案

【问题标题】：How to combine 2 SASS functions as they do almost the same thing just using a different calculation?如何组合 2 个 SASS 函数，因为它们使用不同的计算几乎做同样的事情？
【发布时间】：2012-08-21 01:08:41
【问题描述】：

我想知道是否有人可以建议我如何组合下面的 SASS 函数，基本上它们做同样的事情，但一个专门用于 IE，所以有 2 个是浪费。我尝试使用 if ( $property == 'ie' ) 等附加参数添加 if..else 语句，但没有成功。

功能：

// To use width, margin, padding...
@function percentageWidth( $elementWidth, $containerWidth ){
  @return $elementWidth/$containerWidth * 100%;
}

// To use *width ie6/7 workarounds
@function iePercentageWidth( $elementWidth, $containerWidth ){
  @return $elementWidth/$containerWidth - 0.5/$containerWidth * 100%;
}

当前的 CSS：

width: percentageWidth( 214,945 );
*width: iePercentageWidth( 214,945 );

我也想在以下方面使用此功能：

margin: percentageWidth( 23,945 );

【问题讨论】：

为什么不使用一个可以计算并给你一个保证金和*保证金的mixin？
我怎样才能让这个mixin适用于所有的属性和计算？

标签： css sass

【解决方案1】：

这是一个通用的 mixin，您可以使用它来创建一对属性：

@mixin ieprop($name, $elementWidth, $containerWidth) {
   #{$name}: percentageWidth($elementWidth, $containerWidth);
   *#{$name}: iePercentageWidth($elementWidth, $containerWidth);
}

您将属性名称作为第一个参数传递，如下所示：

.cls {
  @include ieprop('width', 214, 945);
  @include ieprop('margin', 23, 945);
}

【讨论】：

【解决方案2】：

这是你需要的吗？

@mixin twoWidths($x, $y){
  width: percentageWidth($x, $y);
  *width: iePercentageWidth($x, $y);
}

然后在你的样式表中你会这样称呼它：

@include twoWidths(500,700);

【讨论】：