引导4 sass两种渐变颜色到导航栏链接悬停不工作

我对sass真的很陌生，我已经为此搜索了很多次，但我没有找到任何解决方案，请帮助我

我已经创建了具有渐变背景的bootstrap 4导航栏，渐变导航栏链接可以完美工作，我再次向a添加渐变字体颜色：悬停其工作，但如果我向a添加渐变背景颜色：悬停其不工作，则只显示“a”链接背景颜色渐变，而不显示“a”字体渐变

任何帮助都将不胜感激，并提前向您表示感谢

HTML

<nav class="navbar navbar-expand-sm">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBarItems" aria-controls="navbarText"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navBarItems">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">Books</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">Guest</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link active">Contact us</a>
            </li>
        </ul>
    </div>
</nav>

---

试试这个代码，它对我有用

.navbar {
   @include red-gradient();
   .navbar-nav li a {
       @include gold-text-gradient;
   }

   .navbar-nav{ 
       a:hover {
         @include red-text-gradient();
       }
       li:hover{
         @include gold-gradient();
       } 
    } 
}

---

问题是您将此渐变设置为文本（

，在本例中）而不是文本的容器（

）。

是的，我在发布此问题之前尝试过此渐变，但我是否可以通过正常的css方式存档此渐变，即：hover{color:#fff；background:#000}作为渐变色，我想你不能，因为在这种情况下你需要访问a:hover{}的父对象，而我不知道Sass中的方法。但我觉得我给你的解决方案很有效，而且效果很好。非常感谢你的帮助，

.navbar {
   @include red-gradient();
   .navbar-nav li a {
       @include gold-text-gradient;
   }

   .navbar-nav{ 
       a:hover {
         @include red-text-gradient();
       }
       li:hover{
         @include gold-gradient();
       } 
    } 
}