Cannot set unit to '$input-btn-line-height' value

[ravigupta-art]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

I was trying to set the '$input-btn-line-height' bootstrap variable to as following: $input-btn-line-height: 1.25rem;

I get the following error:

Error: 1.25rem*em isn't a valid CSS value.
235 │   @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);

Setting the variables values in px, em or rem does not work. Setting the unit-less value, the sass compiles but it does not produce intended results.

Reduced test cases

reduced test case does not apply here as this is SASS related issue. Also, I could not find anyway to replicate the issue on an online editor.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.x

[mdo]

I don't see a particularly useful way around this—we assume a unitless line-height value. I'm not entirely sure why you'd want or need the 1.25rem, assuming the font-size is rem, you should have the desired approach, no?

[ravigupta-art]

I differ on the point that there is no use of setting explicit line-height for elements. As a designer, I like to set explicit font-size and line-height pairs for different use cases. This is widely used in design community.

The reason I want line-height in rem units is because I have set my font size in rem units like below: $input-btn-font-size: 0.875rem;

Knowing that I have root font-size as 16px. I know font-size of 0.875rem will give me 14px size and line-height of 1.25rem will give me 20px size. This however assumes that user has not zoomed in or out or the browser's default root font size is not different than 16px. Still, this gives me a desired font-size and line-height ratio.

Setting a unit less value gives undesired result and granular control over layout of the design is lost.

I have found a work around this but doing same with SASS variables is preferable way of doing so.