1

我有这个非常简单的 Sass 函数：

@function to-rem($pxval) {
    @return #{$pxval / $base-font-size}rem;
}

转换$pxval为一个rem值，例如

margin-top: to-rem(24);

输出：

margin-top: 1.5rem;

IE 8（旧 IE）及更低版本不支持rem这样处理这种情况：

@function to-rem($pxval) {
    @if $old-ie {
        @return #{$pxval}px;
    } @else {
        @return #{$pxval / $base-font-size}rem;
    }
}

但是因为我做响应式站点，所以我需要支持也不支持的 Opera Mini，rem而且我没有像旧 IE 那样对 Opera Mini 进行过滤的方法。

有什么想法可以在不使用 mixin 的情况下做到这一点吗？我有一个 mixin 做同样的事情，但我用它来声明多个值并且可以处理多个属性，例如

@include to-rem(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966));
@include to-rem(width height, 125);

我喜欢单个值的函数，因为它更容易编写，例如

padding: to-rem($spacing-base) 0;

与此相比：

@include to-rem(padding, $spacing-base 0);
4

1 回答 1

0

你已经有了答案：使用 mixin。以任何语言返回 2 个值的唯一方法是返回一个列表（或数组）。

@function to-rem($pxval) {
    @return $pxval * 1px,  $pxval / $base-font-size * 1rem;
}

.test {
    $sizes: to-rem(24);
    margin: nth($sizes, 1);
    margin: nth($sizes, 2);
}

mixin 显然在这里获胜。

于 2013-02-13T13:14:43.733 回答