Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Origen Enlace

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

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?

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?

Aviso eliminado Atraer atención por user7176
Recompensa finalizada con devconcept's answer elegida por ComunidadBot
Aviso añadido Atraer atención por user7176
Recompensa iniciada por un valor de 50 de reputación por ComunidadBot
se añadieron 13 caracteres en el cuerpo
Origen Enlace
user7176
user7176

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

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?

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?

Origen Enlace
user7176
user7176

¿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?