Css 循环类并包含带有变量的属性

Css 循环类并包含带有变量的属性,css,sass,Css,Sass,所以我试图在我的sass文件中加入一些逻辑。用户可以为主页上显示的具有该颜色的卡片选择主题/颜色 <li class="theme-red"> Card 1 <//a> <li class="theme-blue"> Card 2 </li> 然而,对于多个主题,我们会一遍又一遍地为每个具有相同属性的主题进行大量复制和粘贴 我希望我们可以用SASS函数或类似的函数预定义每个类和属性。将类名添加到列表中,并为每个主题定义主颜色和次颜色 例如: $

所以我试图在我的sass文件中加入一些逻辑。用户可以为主页上显示的具有该颜色的卡片选择主题/颜色

<li class="theme-red"> Card 1 <//a>

<li class="theme-blue"> Card 2 </li>
然而,对于多个主题,我们会一遍又一遍地为每个具有相同属性的主题进行大量复制和粘贴

我希望我们可以用SASS函数或类似的函数预定义每个类和属性。将类名添加到列表中,并为每个主题定义主颜色和次颜色

例如:

$themes-list: "red", "blue";
还有一个foreach循环,它填充了类名注释我真的不知道语法,我希望有人能帮我解决这个问题

@for $theme in $themes-list

    .theme-$theme {
        background: $primary-$theme-color; 
        header { 
          background: $secondary-$theme-color;
        }
    }
我不知道怎么做,但会有包装纸混入?这允许我们定义每个主题的颜色

@mixin theme-colors {
    $primary-red-color: red;
    $secondary-red-color: darkred;

    $primary-blue-color: blue;
    etc
}
如果可能的话,怎么可能

可能的副本:
@mixin theme-colors {
    $primary-red-color: red;
    $secondary-red-color: darkred;

    $primary-blue-color: blue;
    etc
}