Las barras (`/`) en valores CSS cuando el uso de menos (por ejemplo, en `taquigrafía font`)

Question

Noté un problema cuando el uso de menos con taquigrafía fuente

.font(@weight: 300, @size: 22px, @height: 32px) { 
    font: @weight @size/@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 
} 

lo anterior falla con

this.a.toCSS is not a function 
http://localhost/tumblr/modern1/css/style.less on line 1, column 0: 
1. @highlight: #cb1e16; 
2. @shade1: #cb1e16; 

cuando me separé las propiedades arriba funciona

.font(@weight: 300, @size: 22px, @height: 32px) { 
    font-weight: @weight; 
    font-size: @size; 
    line-height: @height; 
    font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

}

Creo que es debido a la barra/eso está causando el problema, creo que menos puede hacer cálculos, por ejemplo. 2px + 5 = 7px tratando de hacer una división?

Answer 1

acabo de encontrar con este tema, la función de escape (por less.js de todos modos) es: e() gusta esta

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

Answer 2

La barra inclinada / personaje está causando el compilador MENOS dividir su fuente -size por su altura de línea. Puede:

1. independiente de su CSS en forma abreviada no, reglas separadas

   font-size: @size; altura de línea: @height;

2. Escapar algunas o todas las reglas de taquigrafía de fuente LESS. La barra oblicua / es la mejor parte para escapar. Puede usar la sintaxis de escape e, e("/"), o la más reciente, mejor documentada tilde-quote ~"/". También puede usar la sintaxis de interpolación de cadena LESS @{} para insertar sus variables.

Prueba esto:

font: @weight @size~"/"@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

O esto:

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

Answer 3

MENOS 1.4 y superior tienen ahora una opción "strictMath" que resuelve la ambigüedad entre la fuente y taquigrafía. En 1.4 está deshabilitado de forma predeterminada para facilitar la transición, pero en versiones posteriores estará habilitado de manera predeterminada.

Véase el 1.4 notes here

Cuando se habilita strictMath, todas las operaciones matemáticas deben ser envueltos en paréntesis (10px/5px) y la barra diagonal en el corto fuente no se interpretará como división.