SASS 包含父样式 [英] SASS include parent styles

问题描述

我正在尝试找到一种方法，将父样式包含在嵌套样式中.在下面的代码中，我想在两个嵌套样式中也包含在 .random-div 上设置的宽度和框大小，以便 .random-div--large 将设置 width、box-sizing 和 padding.

I am trying to find a way to include the parents styles within nested styles. In the code below, I want to include the width and box-sizing that are set on .random-div in the two nested styles too, so that .random-div--large would have width, box-sizing and padding all set.

.random-div {
    width: 100%;
    box-sizing: border-box;

    &--large {
        padding: 65px 45px;
    }

    &--small {
        padding: 25px 15px;
    }
}

我尝试在嵌套类中扩展父类，但这也包括所有其他嵌套样式.有没有办法只包含父样式?

I've tried extending the parent class within the nested ones but that includes all of the other nested styles too. Is there any way to just include the parent styles?

推荐答案

创建一个占位符并使用它.

Create a placeholder and use that.

%random-div {
    width: 100%;
    box-sizing: border-box;
}

.random-div {
    @extend %random-div;
    &--large {
    @extend %random-div;
        padding: 65px 45px;
    }

    &--small {
    @extend %random-div;
        padding: 25px 15px;
    }
}

这篇关于SASS 包含父样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！