Me gusta usar unidades rem con retrocesos de píxeles para el tamaño de mi CSS y estoy tratando de hacer mixins para ayudar con eso. Para el tamaño de fuente, esto es fácil:
@mixin font-size($size) {
font-size: $size + px;
font-size: ($size / 10) + rem;
}
Pero para el relleno, el margen, etc., el mixin debe aceptar argumentos variables, lo cual es posible según la documentación de Sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments
Sin embargo, con el siguiente mixin, en lugar de dividir por 10, el mixin solo agrega una barra entre los números. Eso es esto:
@mixin padding($padding...) {
padding: $padding + px;
padding: ($padding / 10) + rem;
}
.class {
@include padding(24);
}
Produce esto:
.class {
padding: 24px;
padding: 24/10rem;
}
En lugar de esto, como esperaba:
.class {
padding: 24px;
padding: 2.4rem;
}
¿Hay alguna manera de asegurarse de que Sass reconozca las variables como números y, por lo tanto, use el operador de división en ellas correctamente?
Además, después de probar esto más, me di cuenta de que la concatenación solo tiene lugar en la última variable.