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;


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


  • Oct 20, 2019 Split blog articles and bookmarks
Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated daily).


No mentions yet.