Escribir una función Sass/Scss que devuelve una cadena

Question

Estoy tratando de optimizar los cálculos relacionados con CSS utilizando dos funciones de utilidad personalizadas en Scss.

Uno de los ME:

@function _em($wanted, $inherited) { 
    @return ($wanted/$inherited) + 'em'; 
} 

... y otra para porcentajes:

@function _pc($wanted, $parent) { 
    @return (($wanted/$parent) * 100) + '%'; 
} 

... entonces llamarlos en línea:

body { 
    margin: _pc(40,1024); 
    font-size: _em(20,16); 
    line-height: _em(26,20); 
} 

Ninguno de ellos están regresando la cadena esperada Nem o N%, sin embargo. (creo que es mi concatenación de cadenas - es decir, pegando la unidad declarativa en el final del cálculo -. Pero no estoy seguro)

¿Alguien puede arrojar alguna luz sobre lo que estoy haciendo mal?

Answer 1

En realidad, su problema es el nombre del mixin. Acabo de descubrir esto por mi cuenta, pero aparentemente no puedes comenzar un mixin con un guión bajo.

Esto funciona: http://jsfiddle.net/B94p3/

@function -em($wanted, $inherited) { 
    @return ($wanted/$inherited) + 'em'; 
} 

@function -pc($wanted, $parent) { 
    @return (($wanted/$parent) * 100) + '%'; 
} 

p { 
    font-size: -em(40,16); 
} 

Answer 2

Del mismo modo, escribí esta función para la unidad de conversión px-rem.

Puede modificar en consecuencia.

$is-pixel: true; 
$base-pixel: 16; 

@function unit($value) { 
    @if $is-pixel == true { 
    $value: #{$value}px; 
    } @else { 
    $value: #{$value/$base-pixel}rem; 
    } 
    @return $value; 
} 

Ahora, se puede utilizar la siguiente

.my-class { 
    width: unit(60); 
    height: unit(50); 
}