Slashes (`/`) dans les valeurs CSS en utilisant moins (par exemple `un raccourci font`)

Question

i remarqué un problème lors de l'utilisation moins avec un raccourci de police

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

le dessus échoue avec

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; 

quand je partagerai les propriétés jusqu'à cela fonctionne

.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; 

}

je pense que c'est à cause de la barre oblique/ce qui cause le problème, je pense que moins peut faire des calculs, par exemple. 2px + 5 = 7px c'est essayer de faire une division?

Answer 1

juste couru dans cette question, la fonction d'échappement (pour less.js de toute façon) est: e() Vous aimez cette

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

Answer 2

La barre oblique / caractère est à l'origine du compilateur MOINS de diviser votre police -size par votre taille de ligne. Vous pouvez:

1. Séparez vos CSS dans la non-abrégée, des règles distinctes

   font-size: @size; hauteur de ligne: @height; Échappez à tout ou partie de votre règle de raccourcissement de police LESS. Le slash / lui-même est la meilleure partie pour échapper. Vous pouvez utiliser la syntaxe d'échappement e, e("/"), ou la nouvelle tilde-quote ~"/", mieux documentée. Vous pouvez également utiliser la syntaxe @{} pour l'insertion de vos variables.

Essayez ceci:

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

Ou ceci:

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

Answer 3

MOINS 1.4 et au-dessus ont maintenant une option "strictMath" qui permet de résoudre l'ambiguïté entre sténo police. Dans 1.4, il est désactivé par défaut pour faciliter la transition, mais dans les versions ultérieures, il sera activé par défaut.

Voir la 1.4 notes here

Lorsque strictMath est activé, toutes les opérations mathématiques doivent être enveloppées entre parenthèses (10px/5px) et la barre oblique à court de la police ne sera pas interprété comme division.