Skip to main content
1 de 3
user avatar
user avatar

¿Cómo evitar que Stylus realice la división de un parámetro?

Mi pregunta es exactamente este mismo problema con SASS 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?

user7176