相关疑难解决方法(0)

我正在使用Bootstrap的SASS端口,我想知道使用预定义的mixins和使用SASS之间是否有任何区别@extend.

例如,如果我有:

<div class="wrapper">
    Some content here....
</div>

这样做有什么区别吗？

.wrapper {
    @include make-row();
}

和

.wrapper {
    @extend .row;
}

？

如果没有区别,是否有其他mixin不等同于单个@extend语句？如果没有这样的mixins,为什么mixin甚至存在？

假设我有一个看起来像这样的css文件:

/* Base styles */
.content {
    background-color: var(--background);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

@media (min-width: 500px) {
    .content {
        font-size: 22px;
    }
}

/* Headers */
h2 {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* Classes */
.small-caps {
    font-feature-settings: "tnum";
    letter-spacing: 0.05em;
}

使用PostCSS,您可以使用另一个类的属性,如下所示:

.another-class {
    composes: content from "other-file.css";
}

......将编译为:

.another-class {
    background-color: var(--background);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px; …