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?