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

StackOverflow https://stackoverflow.com/questions/3090340

  •  29-09-2019
  •  | 
  •  

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?

Was it helpful?

Solution

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;

OTHER TIPS

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;

LESS 1.4 and above now have a "strictMath" option that solves the ambiguity between and font shorthand. In 1.4 it is disabled by default to make transitioning easier, but in later versions it will be enabled by default.

See the 1.4 notes here

When strictMath is enabled, all math operations must be wrapped in parenthesis (10px / 5px) and the forward slash in the font short will not be interpreted as division.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top