Less.js: L'utilisation de CSS3 background-size dans la propriété abrégée 'background' entraîne une erreur de syntaxe

Créé le 10 janv. 2013 · 7Commentaires · Source: less/less.js

La nouvelle propriété background-size CSS3 peut être incluse dans la déclaration abrégée background en la séparant de la spécification background-position par une barre oblique, comme ceci :

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

Le résultat est une erreur de syntaxe, cependant, l'analyseur s'étouffant évidemment avec la partie / contain - la supprimer fait également disparaître l'erreur.

Bien sûr, il est possible de contourner ce problème en échappant la valeur entière de la propriété background avec ~"…" , mais ce serait vraiment bien de pouvoir utiliser la syntaxe par défaut sans restrictions.

bug medium priority

Source

yggi49

Commentaire le plus utile

@gpv-dev

Votre résultat est attendu si vous compilez sans option --strict-math=on . À l'heure actuelle, pour de telles déclarations (à une ou deux exceptions près, par exemple la propriété font ), vous devez utiliser soit --strict-math=on soit mettre un échappement pour / , par exemple : ~"0/100%" .

seven-phases-max le 7 janv. 2015

👍2

Tous les 7 commentaires

On dirait un sous-cas du PR #915, mais il n'y a pas eu de nouvelles à ce sujet depuis un moment...

plumbojumbo le 16 janv. 2013

oui, exactement, c'est pourquoi ce sera dans la 1.4.0. Je prendrai le #915 si @dmcass ne le termine pas.

lukeapage le 16 janv. 2013

Fixé sur le maître

lukeapage le 2 févr. 2013

Je semble avoir ce problème dans 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;
}

Exécution sur Linux Mint 17 Qiana en utilisant lessc 2.1.1.

yang-jandro le 7 janv. 2015

@gpv-dev

seven-phases-max le 7 janv. 2015

👍2

@sept-phases-max

Merci pour la réponse rapide. Votre suggestion était exactement ce dont j'avais besoin.

yang-jandro le 8 janv. 2015

Merci @seven-phases-max, ça marche :
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;