Я пытаюсь создать тему для компонента, поддерживающую несколько цветовых вариаций.Этот компонент определяет цвет градиента кнопки (o · btn-arrow) на основе выбранной темы;тема компонента определяется элементом обертки компонента с class = "parent -theme".Моя архитектура CSS определяет o · btn как «компонент» (потому что он будет многократно использоваться), а класс o · btn имеет некоторый общий код и модификаторы.
Компонент с темой (частичный код):
$themes: (
aqua-blue: $aqua-blue,
leaf: $leaf,
orangeish: $orangeish,
purpink: $purpink,
secondary: $secondary
);
@each $theme-name, $theme-value in $themes { /* Theme generator */
$root: ".c·box-coupon"; /* Root class */
&.-#{$theme-name} {
#{$root}__header {
border-top: solid 4px $theme-value;
}
#{$root}__icon-type {
background-color: $theme-value;
/* Icon type theme modifiers */
@if #{$theme-name} == aqua-blue { @extend %icf-hash; }
@else if #{$theme-name} == leaf { @extend %-icf-discount; }
@else if #{$theme-name} == orangeish { @extend %-print; }
@else if #{$theme-name} == purpink { @extend %-present; }
@else { @extend %-card; }
}
#{$root}__btn-point {
color: $theme-value;
}
#{$root}__header,
#{$root}__product {
border-right: solid 1px $theme-value;
border-left: solid 1px $theme-value;
}
#{$root}__solid-cover {
background-color: $theme-value;
}
.o·btn-arrow {
/* Btn arrow theme modifiers */
/* NOT WORKING SOLUTION */
@if #{$theme-name} == aqua-blue { @extend %-ocean; }
@else if #{$theme-name} == leaf { @extend %-forest; }
@else if #{$theme-name} == orangeish { @extend %-kirby; }
@else if #{$theme-name} == purpink { @extend %-gem; }
@else { @extend %-lake; }
}
}
}
Компонент Btn (полный код):
.o·btn-arrow {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 9px 10px;
&__text {
flex: 1;
text-align: flip(left, right);
color: $white;
letter-spacing: 1.2px;
}
&__arrow {
display: inline-block;
#{$margin-right}: -4px;
color: $white;
transform: flip(scaleX(1), scaleX(-1));
}
/* Modifiers */
&.-fire {
background-image:
flip(linear-gradient(to right, $primary 78%, hsl(30, 89%, 48%)),
linear-gradient(to left, $primary 78%, hsl(30, 89%, 48%)));
}
%-forest {
background-image:
flip(linear-gradient(to right, hsl(85, 39%, 37%) 78%, hsl(199, 61%, 25%)),
linear-gradient(to left, hsl(85, 39%, 37%) 78%, hsl(199, 61%, 25%)));
}
%-gem {
background-image:
flip(linear-gradient(to right, hsl(329, 77%, 47%) 78%, hsl(286, 50%, 30%)),
linear-gradient(to left, hsl(329, 77%, 47%) 78%, hsl(286, 50%, 30%)));
}
%-kirby {
background-image:
flip(linear-gradient(to right, hsl(25, 87%, 42%) 78%, hsl(339, 88%, 59%)),
linear-gradient(to left, hsl(25, 87%, 42%) 78%, hsl(339, 88%, 59%)));
}
%-lake {
background-image:
flip(linear-gradient(to right, hsl(184, 70%, 28%) 78%, hsl(30, 3%, 48%)),
linear-gradient(to left, hsl(184, 70%, 28%) 78%, hsl(30, 3%, 48%)));
}
%-ocean {
background-image:
flip(linear-gradient(to right, hsl(192, 100%, 32%) 78%, hsl(278, 54%, 31%)),
linear-gradient(to left, hsl(192, 100%, 32%) 78%, hsl(278, 54%, 31%)));
}
Как мне решить эту проблему?