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

Question

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

函数:

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