Skip to main content
2 de 3
se añadieron 13 caracteres en el cuerpo
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 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?

user7176