Geek Answers Handbook

LESS CSS - Unable to split two pixel blocks and return value without unit

I would like to (temporarily) remove the units of my @baseLineHeight and @baseFontSize variables so that I can separate them to get a relative line-height . This is what I tried:

 @baseFontSize: 12px; @baseLineHeight: 18px; font: @baseFontSize~"/"@baseLineHeight/@baseFontSize sans-serif;

It raises the following error:

 Object #<Object> has no method 'toCSS' (Less::ParseError)

Preferred Output:

 font: 12px/1.5 sans-serif;
+8
css less web
source share
3 answers

Meanwhile, there seems to be a function for this: http://lesscss.org/functions/#misc-functions-unit

Here is the code from the comment, just for completeness. (thanks to cfx).

 font: @baseFontSize~"/"unit(@baseLineHeight/@baseFontSize) sans-serif;
+6
source share

I skipped some of the documentation regarding JavaScript evaluation. This seems to solve my problem:

 font: @baseFontSize~"/"`parseInt("@{baseLineHeight}") / parseInt("@{baseFontSize}")` sans-serif;
+2
source share

Other answers do not seem to work.

According to the LESS documentation , the unit() function will remove or change the unit of measure. Since a function accepts only one dimension as a parameter (and an optional parameter), you should use the following:

 unit((@baseLineHeight/@baseFontSize))

Due to strict math , you will notice that the line above may need to be wrapped in parentheses so that the math is actually evaluated.

 @baseFontSize: 12px; @baseLineHeight: 18px; p { font: @baseFontSize ~"/" unit((@baseLineHeight/@baseFontSize)) sans-serif; }

LESS above will output the following desired results:

 p { font: 12px / 1.5 sans-serif; }
+1
source share

More articles:


All Articles