¿Cómo se eliminan las unidades de medida de una ecuación Sass mixin?

Question

He escrito una mezcla Sass muy simple para convertir valores de píxeles en valores rem (ver Jonathan Snook's article on the benefits of using rems). Aquí está el código:

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

Este mixin funciona bastante bien, pero estoy un poco insatisfecho con la sintaxis incluir para ello. Ver, preferiría pasar un valor de píxel en la declaración de inclusión en lugar de un número simple. Este es un pequeño detalle, pero agregaría significado semántico a la declaración de inclusión que actualmente no existe. Esto es lo que me sale cuando intento pasar un valor de píxel en la instrucción de inclusión:

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

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

Una vez Sass ve un valor de píxel que se pasa en una ecuación, se da salida a la 'px'. Quiero quitar esa unidad de medida como si estuviera usando parseFloat o parseInt en JavaScript. ¿Cómo se hace uno dentro de un mixin Sass?

Answer 1

La eliminación de unidades de un número se realiza por división, como en Álgebra.

$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; 
} 

Las unidades en Sass se pueden tratar como en la matemática real, por lo que px/px/rem va a solo rem. ¡Disfrútala!

Answer 2

Aquí hay una función que puede usar. Basado en Foundation funciones globales de ayuda.

@function strip-unit($num) { 

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

uso de la muestra:

... Removed for brevity ... 

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