Lo que quieres es muy sencillo de lograr ya que stylus te permite llamar a un mixin de dos formas
mixin(arguments)
y
mixin arguments
La diferencia entre ambos es que la primera forma evalúa la expresión antes de pasarla como argumentos y la segunda pasa la expresión sin evaluar, tal y como la escribiste
Cuando uses mixins puedes omitir completamente los paréntesis lo cual te podría dar un fantástico soporte para propiedades específicas de navegadores(vendor property)!
Nota que (...) en nuestro mixin es tratado como una propiedad y no una invocación recursiva de una función.
Si en tu hoja de estilos
/* mixin */
columns(n...)
width (n)
div
columns(1/4)
produce
div {
width: 0.25;
}
Escribir
div
columns 1/4
producirá
div {
width: 1/4;
}
Puedes comprobarlo aquí usando la herramienta online del propio stylus
Edición
Si además de obtener la fracción quieres descomponerla en partes e incluir más argumentos en la llamada puedes especificar más argumentos en la declaración del mixin y rest params se encargará del resto
/* mixin */
// (recomendado)
columns(numerador, simbolo, divisor, n...)
width '%s%s%s' % numerador, simbolo, divisor
div
columns 1/4;
Aún producirá la misma salida, puedes comprobarlo aquí
div {
width: 1/4;
}
pero ahora tienes el numerador
y el divisor
como variables independientes(puedes usar p
para mostrarlas en la consola) y en n el resto de los argumentos.
Esto asume que en la entrada el primer argumento siempre es una fracción y es interpretada por stylus de la siguiente forma 1
, /
y 4
(es por esto que necesitas tres argumentos).
Para entradas más complejas puedes usar arguments
y descomponerlo en partes
/* mixin */
columns()
// asumiendo que el primer argumento sea una fraccion
fraccion = '' + arguments[0]
parts = split(' / ', fraccion)
numerador = unquote(parts[0])
denominador = unquote(parts[1])
width s('%s/%s', numerador, denominador)
padding arguments[1]
margin arguments[2]
div
columns 1/4, 10px 10px, 20px 10px;
Producirá esta salida que puedes verificar aquí
/* mixin */
div {
width: 1/4;
padding: 10px 10px;
margin: 20px 10px;
}
De esta forma puedes pasar más parametros a tu mixin para realizar otras customizaciones.