0

I have a SCSS file containing font mixins, e.g:

@mixin font1 {
    font-size:18px;
    font-weight:bold;
    color:black;
}
%font1 {
    @include font1
}

I want to include this font as a default variable in another mixin. I've tried multiple variations but I cannot get the SCSS to compile as it does not like %font1:

@mixin mainHeader($font: %font1) {
  @extend #{$font};
  ...
}

@mixin mainHeader($font: #{%font1}) {
  @extend #{$font};
  ...
}

Is it not possible to include a mixin as a default variable for use in @extend?

user1486133
  • 1,309
  • 3
  • 19
  • 37

1 Answers1

0

Here %font1 is a placeholder selector, not a mixin. If you want to use it as a variable to extend it you need to define it as a string:

@mixin mainHeader($font:"%font1") {
  @extend #{$font};
}

Currently, mixins can't be invoked dynamically.

Arkellys
  • 5,562
  • 2
  • 16
  • 40
  • Hello, thanks for the answer. Unfortunately this doesn't seem to work, and throws the error `SassError: Expected identifier` - it doesn't like the use of `#{$font}`? I tried using `@include` instead of `@extend` (I actually need to do this because I need to use a media query) and neither work – user1486133 May 20 '22 at 14:11
  • @user1486133 I tested the code on SassMeister and it works fine. What are you using to compile your code? `@include` can't work with a variable, please refer to the link in my answer. – Arkellys May 20 '22 at 16:54