所以我试图在我的sass文件中加入一些逻辑 . 用户可以为具有该颜色的主页上显示的“卡”选择主题/颜色 .
Card 1 /a> Card 2我们正试图通过课程来应用这些主题 . 主题有两种颜色可用于不同的属性 .
.theme-red {
$primary-color: red;
$secondary-color: darkerred;
background: $primary-color;
header {
background: $secondary-color;
}
}
但是,对于多个主题,我们会为每个主题进行大量复制和粘贴,并且反复使用相同的属性 .
我希望我们可以使用SASS函数(或类似函数)预定义每个类和属性 . 将类名添加到列表中,并为每个主题定义主要和次要颜色 .
例如:
$themes-list: "red", "blue";
和一个填充类名的foreach循环(注意我真的不知道语法,我希望有人可以帮助我,如果这是解决方案)
@for $theme in $themes-list
.theme-$theme {
background: $primary-$theme-color;
header {
background: $secondary-$theme-color;
}
}
而且我不确定如何,但是会有一个“包装”(mixin?)允许我们为每个主题定义颜色?
@mixin theme-colors {
$primary-red-color: red;
$secondary-red-color: darkred;
$primary-blue-color: blue;
etc
}
这有可能,如果是这样的话?