需要使用2 @return在萨斯功能

我有了这个非常简单的萨斯功能：需要使用2 @return在萨斯功能

@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因此处理的情况是这样我有老IE标志，当真正的输出样式老只有IE的样式表，所以这个功能我是这样做的，所有被罚款：

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

但因为我做响应的网站，我需要苏pport Opera Mini也不支持rem，我也没有像Opera Mini那样为旧IE浏览器过滤这种方式。

任何想法如何我可以做到这一点，而不使用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);

来源

2013-02-13 Chris Pearce

你已经有你的答案：使用一个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-13 13:14:43 cimmanon

只需检查一下，使用mixin稍微冗长些。 – 2013-02-14 05:04:53

函数的另一个好处是我可以在mixins中使用它：'@include prefix（column-gap，to-rem（$ spacing-base），（-webkit-，-moz-，“”））;'' ，Opera Mini将不得不错过这些罕见的例子。 – 2013-02-14 05:54:48

需要使用2 @return在萨斯功能

回答

相关问题