如何從Sass mixin方程中移除度量單位？

Question

我已經寫了一個非常簡單的Sass mixin，用於將像素值轉換爲rem值（請參閱Jonathan Snook的article on the benefits of using rems）。這裏的代碼：

// Mixin Code 
$base_font_size: 10; // 10px 
@mixin rem($key,$px) { 
    #{$key}: #{$px}px; 
    #{$key}: #{$px/$base_font_size}rem; 
} 

// Include syntax 
p { 
    @include rem(font-size,14); 
} 

// Rendered CSS 
p { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 

這個mixin工作得很好，但我有點不滿意它的包含語法。看，我寧願傳遞一個像素值到include語句中，而不是一個簡單的數字。這是一個小細節，但它會將的語義含義添加到當前不存在的include語句中。下面是我得到的，當我試圖通過像素值到包括聲明：

// Include syntax 
p { 
    @include rem(font-size,14px); 
} 

// Rendered CSS 
p { 
    font-size: 14pxpx; 
    font-size: 1.4pxrem; 
} 

一旦薩斯看到被傳遞到公式的像素值時，輸出的「PX」。 我想剝去的度量單位，就好像我在JavaScript中使用parseFloat或parseInt一樣。 Sass mixin內部如何做到這一點？

Answer 1

從數字中刪除單位是通過除法完成，就像在代數中一樣。

$base-font-size: 10px; 
$rem-ratio: $base-font-size/1rem; 

@mixin rem($key,$px) { 
    #{$key}: $px; 
    #{$key}: $px/$rem-ratio; 
} 


// Include syntax 
p { 
    @include rem(font-size,14px); 
} 

// Rendered CSS 
p { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 

在Sass中的單位可以被視爲真實的數學，所以px/px/rem會變成rem。好好享受！

Answer 2

這是您可以使用的功能。基於全球幫助功能的Foundation。

@function strip-unit($num) { 

    @return $num/($num * 0 + 1); 
} 

使用示例：

... Removed for brevity ... 

@mixin rem($key: font-size, $val) { 
    #{$key}: strip-unit($val) * 1px; 
    #{$key}: (strip-unit($val)/$base-font-size) * 1rem; 
}