使用SASS为颜色主题创建混入

Question

I would like to create various themes in my project (I work with SASS 3.2) :

I defined a variable:

$themeName: Z;

I tried to create a mixin like :

@mixin theme($themeName) {
  @if $themeName == Z {
    @content;
  }

  @if $themeName == Y {
    @content;
  }
}

To be able to use like that:

.wrapper {
  @include theme(Y) {
    border-top: 5px solid blue;
  }
  @include theme(Z) {
    border-top: 10px solid red;
  }
}

But in my CSS file, I have something like that :

.wrapper {
  border-top: 10px solid red;
  border-top: 5px solid blue;
 }

I'll appreciate a lot some help, I spend hours trying to find a solution to easily develop various themes for my platform.

Answer 1

You are calling mixin two times, each time for a different theme. Mixin remaining unchanged, try this:

$currentTheme: Z;

.wrapper {
    @include theme($currentTheme) {
        border-top: 10px solid red;
     }
}

And alter $currentTheme at the beginning of .scss file to which theme you are currently using (Y, Z, A, B, X...), meaning: which theme do you want to see in generated .css file.

EDIT: Thanks for clearing everything up in the comment, now the solution:

$currentTheme: "Z";

@mixin isTheme($theme) {
    @if $theme == $currentTheme {
        @content;
    }
}

.wrapper {
    @include isTheme("Z") {
    border-top: 10px solid green;
}  
    @include isTheme("Y") {
        border-top: 10px solid blue;
    }
}

Just change $currentTheme variable as you see fit (in this case to "Y", just to see that it actually works).