css - 在 scss 中访问 mixin 嵌套元素

Question

我试图_isHollow使用包含访问嵌套元素（第 64 行）。甚至可能吗？因为我唯一可以包括的是整个按钮类。

@mixin button {
    align-items: center;
    background-color: var(--button-background);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    display: inline-flex;
    color: var(--button-color);
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    height: var(--button-height);
    line-height: normal;
    padding-inline: var(--button-padding);
    text-decoration: var(--button-text-decoration);
    text-transform: uppercase;
    transition-duration: .25s;
    transition-timing-function: ease-out;
    transition-property: background-color, color, border;
    will-change: background-color, color, border;

    @include mobile {
        user-select: none;
        width: 100%;
    }

    border: {
        color: var(--button-border);
        style: solid;
        width: var(--button-border-width);
    }

    &:hover,
    &:focus {
        text-decoration: var(--button-hover-text-decoration);
    }

    &:not([disabled]) {
        &:hover {
            @include desktop {
                background-color: var(--button-hover-background);
                border-color: var(--button-hover-border);
                border-radius: var(--button-hover-border-radius);
                color: var(--button-hover-color);
                height: var(--button-hover-height);
                padding-inline: var(--button-hover-padding);
            }
        }
    }

    &[disabled] {
        @include button-disabled();
    }

    &_isHollow {
        background-color: var(--hollow-button-background);
        border-color: var(--hollow-button-border);
        border-radius: var(--hollow-button-border-radius);
        color: var(--hollow-button-color);
        height: var(--hollow-button-height);
        padding-inline: var(--hollow-button-padding);
        text-decoration: var(--hollow-button-text-decoration);

        &:not([disabled]) {
            &:hover {
                @include desktop {
                    background-color: var(--hollow-button-hover-background);
                    border-color: var(--hollow-button-hover-border);
                    border-radius: var(--hollow-button-hover-border-radius);
                    color: var(--hollow-button-hover-color);
                    height: var(--hollow-button-hover-height);
                    padding-inline: var(--hollow-button-hover-padding);
                    text-decoration: var(--hollow-button-hover-text-decoration);
                }
            }
        }
    }

标签： csssasslessscss-mixinsscss-lint