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变量（在这种情况下改为＆＃34; Y＆＃34;，只是为了看它确实有效）。

使用SASS为颜色主题创建mixin

1 个答案: