使用 SASS 为颜色主题创建 mixin

Question

我想在我的项目中创建各种主题（我使用 SASS 3.2）：

我定义了一个变量：

$themeName: Z;

我尝试创建一个 mixin，例如：

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

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

为了能够这样使用：

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

但在我的 CSS 文件中，我有类似的东西：

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

我会很感激一些帮助，我花了几个小时试图找到一种解决方案，以便为我的平台轻松开发各种主题。

Answer 1

你调用了 mixin 两次，每次都是针对不同的主题。 Mixin 保持不变，试试这个：

$currentTheme: Z;

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

并将.scss文件开头的$currentTheme更改为您当前使用的主题（Y，Z，A，B，X...），意思是：您希望在生成的.css文件中看到哪个主题.

编辑：感谢您清除评论中的所有内容，现在是解决方案：

$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;
    }
}

只需更改您认为合适的 $currentTheme 变量（在本例中更改为“Y”，只是为了看看它确实有效）。