Skip to main content
Commonmark migration
Origen Enlace

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.

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.

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.

Recompensa finalizada con 50 de reputación otorgada por ComunidadBot
agregado ejemplo
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

Lo que quieres es muy sencillo de lograr ya que stylus te permite llamar a un mixin de dos formas

mixin(arguments)

y

miximmixin 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 {
  columns(  width: 1/4)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 argumentsarguments 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.

Lo que quieres es muy sencillo de lograr ya que stylus te permite llamar a un mixin de dos formas

mixin(arguments)

y

mixim 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
  columns(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.

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.

agregado ejemplo
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

Lo que quieres es muy sencillo de lograr ya que stylus te permite llamar a un mixin de dos formas

mixin(arguments)

y

mixim 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
  columns(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.

Lo que quieres es muy sencillo de lograr ya que stylus te permite llamar a un mixin de dos formas

mixin(arguments)

y

mixim 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
  columns(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á

/* 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.

Lo que quieres es muy sencillo de lograr ya que stylus te permite llamar a un mixin de dos formas

mixin(arguments)

y

mixim 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
  columns(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.

se añadieron 1987 caracteres en el cuerpo
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading