Skip to main content
agrego pequeña descripción del mixim
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

@devconcept ha explicado excelentemente las 2 formas en que puedes llamar a un mixin. Solo quiera tomarme el atrevimiento de agregarAqui te dejo una forma de extraer el 1 (numerador) y 4: (denominzador) de la fracción.

  • El mixin debe ser llamado sin usuar parentesis para que los parametros no sean evaluados (leer respuesta de @devconcept)
  • La variable size de es convertida a string y dividido (split) a partir de /
  • En la variable parts sera una lista que tendrá en la posición 0 y 1, el numerado y denominador de la fracción.
  • Utilizamos la funcion convert para transformar nuevamente a numeros las partes de la fracción. De no hacerlo, no se podran realizar operaciones matemáticas con los mismos.
columns(size...)
  parts = split(' / ', '' + size)
  numerator = unquoteconvert(parts[0])
  denominator = unquoteconvert(parts[1])

  width size
  borderz-widthindex: denominator +* 'px'2

div {
  columns 1/4
}

Esto resultara:

div {
  width: 1/4;
  borderz-widthindex: 4px;8;
}

Aqui una demoAqui una demo

@devconcept ha explicado excelentemente las 2 formas en que puedes llamar a un mixin. Solo quiera tomarme el atrevimiento de agregar una forma de extraer el 4:

columns(size...)
  parts = split(' / ', '' + size)
  numerator = unquote(parts[0])
  denominator = unquote(parts[1])

  width size
  border-width: denominator + 'px'

div {
  columns 1/4
}

Esto resultara:

div {
  width: 1/4;
  border-width: 4px;
}

Aqui una demo

Aqui te dejo una forma de extraer el 1 (numerador) y 4 (denominzador) de la fracción.

  • El mixin debe ser llamado sin usuar parentesis para que los parametros no sean evaluados (leer respuesta de @devconcept)
  • La variable size de es convertida a string y dividido (split) a partir de /
  • En la variable parts sera una lista que tendrá en la posición 0 y 1, el numerado y denominador de la fracción.
  • Utilizamos la funcion convert para transformar nuevamente a numeros las partes de la fracción. De no hacerlo, no se podran realizar operaciones matemáticas con los mismos.
columns(size...)
  parts = split(' / ', '' + size)
  numerator = convert(parts[0])
  denominator = convert(parts[1])

  width size
  z-index: denominator * 2

div {
  columns 1/4
}

Esto resultara:

div {
  width: 1/4;
  z-index: 8;
}

Aqui una demo

Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

@devconcept ha explicado excelentemente las 2 formas en que puedes llamar a un mixin. Solo quiera tomarme el atrevimiento de agregar una forma de extraer el 4:

columns(size...)
  parts = split(' / ', '' + size)
  numerator = unquote(parts[0])
  denominator = unquote(parts[1])

  width size
  border-width: denominator + 'px'

div {
  columns 1/4
}

Esto resultara:

div {
  width: 1/4;
  border-width: 4px;
}

Aqui una demo