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

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 类分配给锚标记并且它会将其样式设置为按钮时，为什么这不适用于锚标记？

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)

Answer 2

<a> 标签没有按钮的行为。为了使它尝试以下代码

a.btn{
 -webkit-appearance: button;
 -moz-appearance: button;
 appearance: button;

 text-decoration: none;
 color: initial;
}