Question

我已经重写了这个问题，以便更容易理解。

我在主题中使用一个类来控制重音样式。我有一个使用一个主题的多站点，所以主题是使用我的主题类的风格...

.theme-portal
.theme-motogp
.theme-mxgp
.theme-rally

但请注意，我的主题风格会在主题内发生变化。

例如，我的主题类适用于每个页面上的<BODY>标记。

所以喜欢<BODY class="theme-portal">或<BODY class="theme-motogp">等等。但即使正文具有此类<BODY class="theme-portal">，在同一页面上，mxgp类也可以应用于表格或文章，例如<TABLE class="theme-portal">或<ARTICLE class="theme-motogp">

现在我想要聪明并保存代码，我是下面的mixin并控制访问类的样式......

@mixin theme-change($theme) {
    .theme-#{$theme} & {
        @content;
    }
}

我这样用...

.btn {
    text-transform: uppercase;
    font-size: 16px;
    border: none;

    &.btn-accent {
        color: #ffffff;

        /* portal site */
        @include theme-change('portal') {
            background-color: $color-portal-red;
        }

        /* motogp site */
        @include theme-change('motogp') {
            background-color: $color-motogp-orange;
        }

        /* mxgp site */
        @include theme-change('mxgp') {
            background-color: $color-mxgp-red;
        }

        /* rally site */
        @include theme-change('rally') {
            background-color: $color-rally-red;
        }

    }

}

上面的sass块输出......

.theme-portal .btn.btn-accent { ... }
.theme-motogp .btn.btn-accent { ... }
.theme-mxgp .btn.btn-accent { ... }
.theme-rally .btn.btn-accent { ... }

另一个很好的例子，我的mixin正在控制我的主题口音

.header-bar-secondary {

    UL.nav {

        > LI {

            > A {

                /* portal site */
                @include theme-change('portal') {
                    color: #000000;
                    &:hover {
                        background-color: #ffffff;
                        text-decoration: none;
                    }
                }

                /* motogp site */
                @include theme-change('motogp') {
                    ...
                }

                /* mxgp site */
                @include theme-change('mxgp') {
                    ...
                }

                /* rally site */
                @include theme-change('rally') {
                    ...
                }

            }

        }

    }

    /* portal site */
    @include theme-change('portal') {
        border-color: #e0e0e0;
        @include background-image(linear-gradient(#ffffff, #f2f2f2));
        ...
    }

    /* motogp site */
    @include theme-change('motogp') {
        ...
    }

    /* mxgp site */
    @include theme-change('mxgp') {
        ...
    }

    /* rally site */
    @include theme-change('rally') {
        ...
    }

}

上面的sass块输出......

.theme-portal .header-bar-secondary UL.nav > LI > A { ... }
.theme-portal .header-bar-secondary UL.nav > LI > A:hover { ... }
.theme-motogp .header-bar-secondary UL.nav > LI > A { ... }
.theme-motogp .header-bar-secondary UL.nav > LI > A:hover { ... }
.theme-mxgp .header-bar-secondary UL.nav > LI > A { ... }
.theme-mxgp .header-bar-secondary UL.nav > LI > A:hover { ... }
.theme-rally .header-bar-secondary UL.nav > LI > A { ... }
.theme-rally .header-bar-secondary UL.nav > LI > A:hover { ... }

.theme-portal .header-bar-secondary { ... }
.theme-motogp .header-bar-secondary { ... }
.theme-mxgp .header-bar-secondary { ... }
.theme-rally .header-bar-secondary { ... }

好的，这是问题所在。在此块中使用下面的混音。正如我在上一个问题中描述的那样，我试图将主题类移动到元素名称之前。但是我目前的混音正在将课程改为sass区块的开头。

请参阅下面的示例，其中mixin失败。

#primary_carousel {

    .item {

        .inner {


        }

    }

    .overlay {

        H1 {

            /* portal site */
            @include theme-change('portal') {
                ...
            }

            /* motogp site */
            @include theme-change('motogp') {
                ...
            }

            /* mxgp site */
            @include theme-change('mxgp') {
                ...
            }

            /* rally site */
            @include theme-change('rally') {
                ...
            }

        }

    }

}

失败的原因是因为我的主题类像这样应用于<BODY class="theme-portal">。但主题类也适用于<DIV class="item">

的孩子<BODY>

见下面的HTML结构......

<BODY class="theme-portal">

    <DIV id="primary_carousel">

        <DIV class="item theme-motogp">

            <DIV class="inner">

                <DIV class="overlay">

见下面上述失败的SASS块输出......

.theme-portal #primary_carousel .overlay { ... }
.theme-motogp #primary_carousel .overlay { ... }
.theme-mxgp #primary_carousel .overlay { ... }
.theme-rally #primary_carousel .overlay { ... }

但是因为我的body标签已应用<BODY class="theme-portal">，所以它会覆盖应用于<DIV class="item">

的主题类

所以我需要我的sass以某种方式使用简单的mixin或聪明的新＆amp;操作者...

#primary_carousel .theme-portal .overlay { ... }
#primary_carousel .theme-motogp .overlay { ... }
#primary_carousel .theme-mxgp .overlay { ... }
#primary_carousel .theme-rally .overlay { ... }

如果你能帮助我知道一个操作符，它将类移动到选择器之前，而不是那个很棒的sass块的开头。

由于

Answer 1

#primary_carousel {

    .item {

        H1 {

        }

        & .theme-one H1{
            background: red;
        }

        & .theme-two H1{
            background: blue;
        }

    }

}

SASS / SCSS中的＆符取代它嵌套的所有父选择器，而不仅仅是最后一个。在这种情况下，#primary_carousel .item就像在提供的原始代码中一样，它嵌套在H1内部，因此它是#primary_carousel .item H1。您不能使用＆符号将主题类放在其他类之间，因此您必须将它从H1中取出然后将您的类放在您正在更改的类之后的H1上。

编辑：再次查看代码，我实际上只是注意到在这种情况下您甚至不需要＆符号，但我已将它们留在因为问题是关于他们的。

CSS OUTPUT:

#primary_carousel .item .theme-one H1 {
    background: red;
}
#primary_carousel .item .theme-two H1 {
    background: blue;
}

SASS＆符号将类移动到相邻选择，而不是父树

1 个答案: