Less.js: Usar o tamanho de fundo do CSS3 dentro da propriedade `abreviação de acordo resulta em erro de sintaxe

Criado em 10 jan. 2013 · 7Comentários · Fonte: less/less.js

A nova propriedade background-size do CSS3 pode ser incluída na declaração abreviada background separando-a da especificação background-position com uma barra, como esta:

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

O resultado é um erro de sintaxe, porém, com o analisador obviamente engasgando com a parte / contain - removê-lo também faz o erro desaparecer.

Claro que é possível contornar esse problema escapando de todo o valor da propriedade background com ~"…" , mas seria muito bom poder usar a sintaxe padrão sem restrições.

bug medium priority

Fonte

yggi49

Comentários muito úteis

@ gpv-dev

Seu resultado é esperado se você compilar sem a opção --strict-math=on . Agora, para tais declarações (com uma ou duas exceções, por exemplo, font propriedade), você deve usar --strict-math=on ou colocar algum escape para / , por exemplo: ~"0/100%" .

seven-phases-max em 7 jan. 2015

👍2

Todos 7 comentários

Parece um sub-caso de PR # 915, mas não há notícias sobre isso há algum tempo ...

plumbojumbo em 16 jan. 2013

sim, exatamente, é por isso que estará em 1.4.0. Eu assumirei o # 915 se @dmcass não terminar.

lukeapage em 16 jan. 2013

Fixo no mestre

lukeapage em 2 fev. 2013

Parece que estou tendo esse problema no 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;
}

Executando no Linux Mint 17 Qiana usando lessc 2.1.1.

yang-jandro em 7 jan. 2015

@ gpv-dev

seven-phases-max em 7 jan. 2015

👍2

@ sete fases-máx.

Obrigado pela resposta rápida. Sua sugestão era exatamente o que eu precisava.

yang-jandro em 8 jan. 2015

Obrigado @ sete-fases-máx., Comecei a trabalhar:
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;