锚点＆amp;：悬停的SASS / SCSS mixin不起作用

Question

我有这段代码：

 @mixin fade-transition($element) {
    -webkit-transition: $element 0.15s ease-in-out;
    -moz-transition: $element 0.15s ease-in-out;
    -ms-transition: $element 0.15s ease-in-out;
    -o-transition: $element 0.15s ease-in-out;
    transition: $element 0.15s ease-in-out;
}

body {
  background: grey;
  font-family: "Arial";
  background-size: cover;
}

a {

  display: inline-block;
    text-transform: uppercase;
  text-decoration: none;
    letter-spacing: 5px;
    color: #FAFAFA;
    border: 3px solid #FAFAFA;
    padding: 25px;

    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    @include fade-transition(background);

    &:hover {
        background: rgba(8,97,76,0.6);
    }
}

这只是代码的一部分，当我悬停按钮时没有任何反应。我知道：＆amp; hover线无法识别，但为什么会这样？我无法看到什么是错的

感谢您的时间。