5

Mi pregunta es exactamente este mismo problema con SASS que se planteó en Stackoverflow pero adaptado a Stylus. En su día lo intenté pero no fuí capaz de resolverlo y después de conseguir una solución creo que bastante aceptable para SASS quise retomar las pruebas en Stylus pero no he conseguido solucionarlo. Al lío:

Tengo un grid system hecho en Stylus, para crear una columna uso:

div.cuatro
  columns(1/4)

Y obtengo este CSS:

div.cuatro {
  width: calc((100%  * 0.25) - (12px - 12px * 0.25));
  float: left;
  margin-right: 12px;
}

El parametro 1/4 se convierte en 0.25 como debe ser pero me gustaría poder evitar que se realice esa división automáticamente para poder extraer el 4 y utilizarlo para usarlo por ejemplo en una pseudo-clase tipo: nth-child(4n).

Nota

No me interesan soluciones con otra sintaxis como: columns(1, 4) ya que ese mixin puede llevar más parametros que van separados por comas y sería confuso, tampoco poner la fracción entre comillas ya que rompe con el estilo del resto de mixins y funciones.


En Stylus no puedo usar el mismo truco que en SASS de los parametros pasados como argumento ya que funciona de otra manera y hace la división igualmente.

Mientras en SASS:

@mixin columns($n...) {
   width:$n;
}

div{
   @include columns(1/4)
}

devuelve:

div {
  width: 1/4;   
}

en Stylus:

columns(n...)
  width (n)

div
  columns(1/4)

devuelve:

div {
  width: 0.25;
}

¿Alguna idea de como se podría conseguir?

5
  • Si ya has dado el visto bueno, puedes asignar los +50 a quien corresponde, ¿no? Commented el 28 oct. 2016 a las 9:04
  • Ops! pensaba que era suficiente con aceptar la respuesta. P.D.: aunque tampoco me deja hasta dentro de 5 horas
    – user7176
    Commented el 28 oct. 2016 a las 9:10
  • No... de hecho si no asignas los +50 al final del tiempo se repartirán equitativamente. Pienso que es mejor dar los puntos a quien más los merece. Commented el 28 oct. 2016 a las 9:26
  • En cuanto me deje asignaré la recompensa
    – user7176
    Commented el 28 oct. 2016 a las 9:29
  • Perfecto! Estará contento el que respondió correctamente. Commented el 28 oct. 2016 a las 9:31

2 respuestas 2

5
+50

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.

10
  • Interesante, me puede ser útil para algunas cosas pero creo que hice algo parecido o al menos me estoy encontrando algunos problemas con este método que ya intenté resolver en su día. Por una parte tengo más parámetros en el mixin y con este formato me vienen todos juntos y los tengo que separar para tratar con ellos y es bastante engorroso, por otro lado tengo una sintaxis diferente (cosa que no quería), este mixin iría sin paréntesis mientras los demás si llevan y los necesito. 1/2
    – user7176
    Commented el 27 oct. 2016 a las 16:46
  • Tampoco consigo que haga la división cuando me hace falta ni extraer el divisor (es fácil si siempre es una cifra pero no si puede variar, aunque esto no me preocupa mucho, sería raro que tenga más de una cifra) 2/2
    – user7176
    Commented el 27 oct. 2016 a las 16:46
  • En cualquier caso no sé si habrá una forma mejor de hacer lo que quiero, esperaré un poco antes de aceptar tu respuesta a ver si alguien propone otra solución que me convenza más.
    – user7176
    Commented el 27 oct. 2016 a las 16:56
  • @blonfu Pregunta rapida dicho mixin siempre tendrá una fracción como primer argumento o puede ser una entrada arbitraria
    – devconcept
    Commented el 27 oct. 2016 a las 17:09
  • Siempre es una fracción, significa que ocupa x columnas de un total de y columnas: columns(1/4)--> 1 columna de 4; columns(2/3)--> dos columnas de 3
    – user7176
    Commented el 27 oct. 2016 a las 17:13
1

Aqui te dejo una forma de extraer el 1 (numerador) y 4 (denominzador) de la fracción.

  • El mixin debe ser llamado sin usuar parentesis para que los parametros no sean evaluados (leer respuesta de @devconcept)
  • La variable size de es convertida a string y dividido (split) a partir de /
  • En la variable parts sera una lista que tendrá en la posición 0 y 1, el numerado y denominador de la fracción.
  • Utilizamos la funcion convert para transformar nuevamente a numeros las partes de la fracción. De no hacerlo, no se podran realizar operaciones matemáticas con los mismos.
columns(size...)
  parts = split(' / ', '' + size)
  numerator = convert(parts[0])
  denominator = convert(parts[1])

  width size
  z-index: denominator * 2

div {
  columns 1/4
}

Esto resultara:

div {
  width: 1/4;
  z-index: 8;
}

Aqui una demo

4
  • Gracias, me gusta tu forma de hacerlo, yo me había complicado más, no se me había ocurrido que podía convertir el valor en un string dentro de la propia función split()
    – user7176
    Commented el 27 oct. 2016 a las 16:49
  • Actualizo mi respuesta con un cambio y una descripción de lo que se hace en en el mixim
    – Marcos
    Commented el 27 oct. 2016 a las 18:58
  • Ocurre algo extraño con tu ejemplo. Hago operaciones entre numerator y denominator, todas funcionan (suma, resta, multiplicación) menos la división, no entiendo porqué.
    – user7176
    Commented el 28 oct. 2016 a las 6:21
  • Solucionado. Había que ponerlo entre paréntesis
    – user7176
    Commented el 28 oct. 2016 a las 6:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.