Jiew Meng Jiew Meng - 1 month ago 12
CSS Question

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

i noticed an issue when using LESS CSS 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 CSS can do calculations, eg.
2px + 5 = 7px
its trying to do a divide?

Answer

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;