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

StackOverflow https://stackoverflow.com/questions/3090340

  •  29-09-2019
  •  | 
  •  

Pregunta

Me di cuenta de un problema al utilizar menos con la fuente contracción 

.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 / esa es la causa del problema, creo que ya que menos puede hacer cálculos, por ejemplo. 2px + 5 = 7px su tratando de hacer una división?

¿Fue útil?

Solución

Sólo se encontró con este problema, la función de escape (por less.js de todos modos) es: mi() Como esto 

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

Otros consejos

El carácter de barra hacia adelante / está causando el compilador MENOS dividir el tamaño de fuente por su línea de altura. Es posible:

  1. Separa tu CSS en forma abreviada no, reglas separadas

    font-size: @size; line-height: @height;

  2. Escapar parte o la totalidad de la regla de fuente abreviada MENOS. El propio / barra es la mejor parte para escapar. Se puede utilizar el correo, la sintaxis e("/") de escape, o el más nuevo, mejor documentado ~"/"-tilde cotización. También puede utilizar la sintaxis interpolación de cadenas @{} MENOS 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;

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 que está desactivado por defecto para hacer la transición más fácil, pero en versiones posteriores será activado por defecto.

Vea las 1.4 notas aquí

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top