Slashes (`/`) in CSS values when using Less (e.g. in `font` shorthand)

Question

i noticed an issue when using Less with font shorthand

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

the above fails with

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;

when i split the properties up it works

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

}

i think its because of the slash / thats causing the problem, i think since Less can do calculations, eg. 2px + 5 = 7px its trying to do a divide?

Answer 1

Just ran into this issue, the escape function (for less.js anyway) is: e() Like this

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

Answer 2

The forward slash / character is causing the LESS compiler to divide your font-size by your line-height. You can:

1. Separate your CSS into non-shorthand, separate rules

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

2. Escape some or all of your LESS font shorthand rule. The slash / itself is the best part to escape. You can use the e, e("/") escape syntax, or the newer, better documented tilde-quote ~"/". You can also use the LESS string interpolation @{} syntax to insert your variables.

Try this:

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

Or this:

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