需要使用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在薩斯功能

回答

相關問題