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;