Less.js: El uso de CSS3 background-size dentro de la propiedad abreviada `background` da como resultado un error de sintaxis

Creado en 10 ene. 2013 · 7Comentarios · Fuente: less/less.js

La nueva propiedad background-size CSS3 se puede incluir en la declaración abreviada background separándola de la especificación background-position con una barra inclinada, como esta:

div {
    background: url('/path/to/image.png') left center / contain no-repeat;
}

El resultado es un error de sintaxis, sin embargo, con el analizador obviamente ahogándose en la parte / contain ; eliminarlo también hace que el error desaparezca.

Por supuesto, es posible solucionar este problema escapando del valor completo de la propiedad background con ~"…" , pero sería muy bueno poder usar la sintaxis predeterminada sin restricciones.

bug medium priority

Fuente

yggi49

Comentario más útil

@ gpv-dev

Se espera su resultado si compila sin la opción --strict-math=on . A estas alturas, para tales declaraciones (con una o dos excepciones, por ejemplo, font propiedad), debe usar --strict-math=on o poner un escape para / , por ejemplo: ~"0/100%" .

seven-phases-max en 7 ene. 2015

👍2

Todos 7 comentarios

Parece un sub-caso de PR # 915, pero no ha habido noticias sobre eso por un tiempo ...

plumbojumbo en 16 ene. 2013

sí, exactamente, por eso estará en 1.4.0. Tomaré el # 915 si @dmcass no lo remata.

lukeapage en 16 ene. 2013

Fijado en maestro

lukeapage en 2 feb. 2013

Parece que tengo este problema en lessc 2.1.1.

/* less */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0/100%;
    position: fixed;
}

/* compiled css */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0;
    position: fixed;
}

Ejecutando en Linux Mint 17 Qiana usando lessc 2.1.1.

yang-jandro en 7 ene. 2015

@ gpv-dev

seven-phases-max en 7 ene. 2015

👍2

@ siete-fases-max

Gracias por la rápida respuesta. Tu sugerencia fue exactamente lo que necesitaba.

yang-jandro en 8 ene. 2015

Gracias @ seven-phase-max, lo hice funcionar:
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;