css - 如何组合 2 个 SASS 函数，因为它们只是使用不同的计算来做几乎相同的事情？

Question

我想知道是否有人可以建议我如何组合下面的 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 );

Answer 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);
}

Answer 2

这是你需要的吗？

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

然后在您的样式表中，您可以这样称呼它：

@include twoWidths(500,700);