How to use variables inside @include (Sass)?

[n_merciano]

$current_theme: "theme_two";

@mixin themes {
  @if $current_theme == "theme_one" {
    $white: #ffffff;
    $black: #1d1d1b;
    $red: #cd1719;
    $yellow: #ffdd00;
    @content;
  }
  
  @if $current_theme == "theme_two" {
    $blue: #009bc9;
    $lightblue: #9fd8e9;
    $magenta: #ed1556;
    $purple: #6c315a;
    $yellow: #feed01;
    @content;
  }
  
  @if $current_theme == "theme_three" {
    $blue: #24215c;
    $red: #c72026;
    $lightblue: #3482a9;
    $pink: #d1615e;
    $green: #6bb745;
    $brown: #502f37;
    $gray: #c8c8c8;
    $darkgray: #736e6e;
    @content;
  }
  
  @if $current_theme == "theme_four" {
    $blue: #272363;
    $red: #d61e4a;
    $lightblue: #2f9ecc;
    $pink: #df6763;
    $green: #99c34d;
    $gray: #c8c8c8;
    $darkgray: #736e6e;
    @content;
  } 
}

body {
  @include themes {
    color: $blue
  }
}

I am trying… to use color variables for each different theme but i get this error: Undefined variable: “$blue”.

Can somebody help?

[RyanReese]

I’ve had a similar issue to this in doing district sites for clients. What I end up doing is something like this

@mixin theme($blue, $red) {
  color:$blue;
}
.some-section {
  @include theme(#bluehex, #redhex);
}
.some-section2 {
  @include theme(#anotherbluehex, #anotherredhex);
}

Would that fit your needs?

[n_merciano]

Looks good to me is there any way i can use variables inside a include or mixin?

[RyanReese]

In your post #1 example, you’d need to have the variable $current_theme inside of the mixin. So you can have it inside of the mixin but before you make use of it in conditionals (if/else) it has to be created.

This doesn’t really ft your needs though because you need it brought into the mixin for dynamicability (made that word up).

That’s why I suggest you pass the theme/other crap into it via parameters in the mixin.