LESS Quicktips: escaping / (slash) in shorthand

There are some CSS shorthand declarations that require the use of / which LESS may interpret as the math operator for a division (depending on the values in your declaration). Examples for this are:

.selector {
    font: font-style font-variant font-weight font-size/line-height font-family;
}

and

.selector {
    background: background-color background-image background-position/background-size background-repeat background-attachment;
}

I ran into the latter use case while defining multiple backgrounds in shorthand. You can escape the slash in LESS using e('/'), e.g.

.selector {
    background: url("../images/bg.png") center 300px e('/') 70% no-repeat;
}

Alternatively, there is the option to enable "strict math" in LESS; when strict math is enabled, all math operations must be wrapped in parenthesis (10px / 5px) which causes overhead there, but solves the slash ambiguity for shorthand.

Choose your poison!

PS: Obviously you can also avoid this by not using shorthand for cases like font and background.