Создание темы компонента с использованием соглашений Sass, Atomic-Design и ABEVM - PullRequest
Новая
       33

Создание темы компонента с использованием соглашений Sass, Atomic-Design и ABEVM

0 голосов
/ 25 сентября 2018

Я пытаюсь создать тему для компонента, поддерживающую несколько цветовых вариаций.Этот компонент определяет цвет градиента кнопки (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%)));
    }

Как мне решить эту проблему?

...