Could not resolve the variable within mixin

[bazzle]

I created a mixin with variables and @if like this;

@mixin grid($howmanycols: 2, $gap: 1.5rem){
  display:grid;
  grid-auto-rows:auto;
  grid-gap:$gap;
  @if $howmanycols == 2{
    grid-template-columns:1fr 1fr;
  } @else if $howmanycols == 3{
    grid-template-columns:1fr 1fr 1fr;
  } @else if $howmanycols == 4{
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}

.thing{
  @include grid(2, 1.5rem);
}

https://www.sassmeister.com/gist/0a2d33972534af2cddd8323cc19e543b

Getting this error; Fatal error: postcss-advanced-variables: /Users/bazzle/Documents/become a freelancer/site-design/css/input/main.css:12:15: Could not resolve the variable "$howmanycols" within "if $howmanycols == 3"

[gael-boyenval]

hello @bazzle it seems @else if is not supported. but you can work around by doing multiple if :

@mixin grid($howmanycols: 2, $gap: 1.5rem){
  display:grid;
  grid-auto-rows:auto;
  grid-gap:$gap;
  
  @if $howmanycols == 2 {
    grid-template-columns:1fr 1fr;
  } 

  @if $howmanycols == 3{
    grid-template-columns:1fr 1fr 1fr;
  } 
  
  @if $howmanycols == 4 {
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}

.thing{
  @include grid(2, 1.5rem);
}

[gael-boyenval]

🤣 didn't see how hold is this issue ! I think you've found your solution by now !