Question

我正在更新到现在使用Sass over Less的新Bootstrap版本4，而我使用Bootstrap的应用程序直接使用Less文件而不是完全编译的css分发。

但现在我遇到了麻烦 - 我明白Sass不允许你在@media查询中使用@extend，但我不明白的是我如何解决重载的简单问题在更大的屏幕上风格。

例如，我的Sass的精简版看起来像：

.box {

    //mobile styles
    background: green;

    .logout-button {

        //mobile styles for logout button
        background: red;
    }
}

//everything over 767px
@media (min-width: 768px) {

    .box {

        .logout-button {

            @extend .btn-link; //bring in the Bootstrap button link style here
        }
    }
}

在这个例子中，我希望.logout-button使用Bootstrap的.btn-link样式。但是因为你不能像这样延伸，我对如何实现这一点感到困惑。

与Less相比，Sass需要采用完全不同的方法吗？ Less允许你这样做，所以如果考虑到Bootstrap最近的转换这是一个限制，我会感到惊讶。

提前致谢！

Answer 1

您是正确的，您不能@extend这样。但是您可以@include一些@mixin。

不幸的是，默认情况下，在Bootstrap 4中没有@mixin可以创建.btn-link变体。
如果您需要其他变体，则可以使用Bootstrap 4中的@mixin：

@include button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))

或这个

@include button-outline-variant($color, $color-hover: #fff)

（有用的list of Boostrap 4 mixins）

但是，如果您需要.btn-link，则必须自己制作@mixin。诸如此类（将.btn-link的复制/粘贴样式添加到新的mixin中）

//
// Link buttons
//
// Make a button look and behave like a link
@mixin btn-link() {

    font-weight: $font-weight-normal;
    color: $link-color;
    background-color: transparent;

    @include hover {
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;
        background-color: transparent;
        border-color: transparent;
    }

    &:focus,
    &.focus {
        text-decoration: $link-hover-decoration;
        border-color: transparent;
        box-shadow: none;
    }

    &:disabled,
    &.disabled {
        color: $btn-link-disabled-color;
        pointer-events: none;
    }

    // No need for an active state here

}

然后您可以根据需要使用它：

//everything over 767px
@media (min-width: 768px) {
    .box {
        .logout-button {
            @include btn-link;
        }
    }
}

关于此的不错的文章：SCSS - Extending Classes Within Media Queries

在Sass和Bootstrap中扩展媒体查询4

1 个答案: