I am currently working on a project using SASS 3.2 and I want to create different themes for it:
First, I have defined a variable:
$themeName: Z;
Next, I attempted to create a mixin like this:
@mixin theme($themeName) {
@if $themeName == Z {
@content;
}
@if $themeName == Y {
@content;
}
}
My goal is to be able to use it like this:
.wrapper {
@include theme(Y) {
border-top: 5px solid blue;
}
@include theme(Z) {
border-top: 10px solid red;
}
}
However, when I check my CSS file, the output looks like this:
.wrapper {
border-top: 10px solid red;
border-top: 5px solid blue;
}
I have been struggling with this issue for hours now and would greatly appreciate any help in efficiently developing multiple themes for my platform.