css - Bootstrap 4 - SASS 扩展按钮在 anchor 标签上不起作用？

Question

我喜欢 Bootstrap 4 之前的默认按钮的样式。为了尝试制作自己的按钮，我想出了以下 SASS:

.btn-default {
    @extend .btn;
    border-color: #A5A5A5;
}

.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
    color: #808080;
}

如果我使用<button>，这将按预期工作。标签，但如果我使用 <a> 则不会标签。为什么这对两者都不起作用？

<a href="#" class="btn btn-default">
    Test Anchor
</a>

<button type="submit" class="btn btn-default">
    Test Button
</button>

当您通常可以将 .btn 类分配给 anchor 标记并且它会将其样式设置为按钮时，为什么这在 anchor 标记上不起作用？

Answer 1

我认为您不需要@extend .btn，因为您已经在使用.btn。

所有其他 btn-* 变体都有 color、background-color 和 border-color，所以在 CSS 中你可以创建一个 btn-default :

.btn-default{
   color:#333;
   background-color:#bbb;
   border-color:#a5a5a5
 }
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
    color: #808080;
}

Bootstrap SASS 方式是使用按钮变体 @mixin...

.btn-default {
    @include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}

演示:https://www.codeply.com/go/CWJidmeI1D

以下是按钮变体 mixin 的参数:

button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)