How to use @include font-size inside mixin

[yanalshoubaki]

Describe the issue

I create mixin that give me an font-size and line-height with rtl convert, but i need to add font-size function to make it responsive.

The mixin i created :

@mixin fontSize($fontSize, $calc: false) {
  $getFont: map.get($font, $fontSize, "font-size");
  $getLineHeight: map.get($font, $fontSize, "line-height");
  @if $calc {
    font-size: calc(#{$getFont} + var(--font-size-adder));
    line-height: calc(#{$getLineHeight}+ var(--font-size-adder));
  } @else {
    @include font-size($getFont);
    line-height: $getLineHeight;
  }
}

the include not working

bootstrap version : 5.1.3

[gianlucajahn]

It looks like the issue is that you are trying to use the @include directive to include the font-size mixin, but the font-size mixin is not defined. In Bootstrap 5, the font-size mixin is defined in the functions.scss file and is not part of the @mixin syntax.

To fix this issue, you can use the font-size function directly in your fontSize mixin, rather than trying to @include it. Here is an updated version of your mixin that uses the font-size function instead:

@mixin fontSize($fontSize, $calc: false) {
  $getFont: map.get($font, $fontSize, "font-size");
  $getLineHeight: map.get($font, $fontSize, "line-height");
  @if $calc {
    font-size: calc(#{$getFont} + var(--font-size-adder));
    line-height: calc(#{$getLineHeight} + var(--font-size-adder));
  } @else {
    font-size: font-size($getFont);
    line-height: $getLineHeight;
  }
}

In this updated version, we have removed the @include directive and are calling the font-size function directly to set the font size of the element. This should fix the issue and allow your mixin to work as expected.

[yanalshoubaki]

I think there is no function has name font-size, what is the version of bootstrap has this function ?