title: Bootstrap 4 sass two gradient colors to navbar links hover not working
body: <p>i'm really new to sass and i have search a lot for this i cloud not find any solution, help me</p>
  
  <p>i have created bootstrap 4 navbar with gradient background and gradient navbar links its working perfectly and again i add gradient font color to a:hover its working but also if i add gradient background color to a:hover its not working, only showing 'a' link background-color gradient but not 'a' font gradient</p>
  
  <p>Any help will be appreciated, and thank you in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/iQdNx.png" rel="nofollow noreferrer">Expected result</a></p>
  
  <p><a href="https://i.stack.imgur.com/ByG21.png" rel="nofollow noreferrer">Actual result</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-sm"&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBarItems" aria-controls="navbarText"
          aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navBarItems"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="" class="nav-link"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="" class="nav-link"&gt;Books&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="" class="nav-link"&gt;Guest&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="" class="nav-link active"&gt;Contact us&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>SASS</strong></p>
  
  <pre><code>@mixin gold-gradient(){
  background: rgb(249, 206, 112);
  background: -moz-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%);
      background: -webkit-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%);
      background: linear-gradient(to right, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ce70', endColorstr='#7b5a00', GradientType=1);
  }
  
  @mixin red-gradient($dir-1: left,
  $dir-2: right) {
      background: rgb(153, 10, 34);
      background: -moz-linear-gradient($dir-1, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%);
      background: -webkit-linear-gradient($dir-1, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%);
      background: linear-gradient(to $dir-2, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990a22', endColorstr='#d31f1f', GradientType=1);
  }
  
  @mixin gold-text-gradient() {
      background: rgb(249, 206, 112);
      background: -moz-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%);
      background: -webkit-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%);
      background: linear-gradient(to right, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ce70', endColorstr='#7b5a00', GradientType=1);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  @mixin red-text-gradient() {
      background: rgb(153, 10, 34);
      background: -moz-linear-gradient(left, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%);
      background: -webkit-linear-gradient(left, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%);
      background: linear-gradient(to right, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990a22', endColorstr='#d31f1f', GradientType=1);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  .navbar {
      @include red-gradient();
      .navbar-nav li a {
          @include gold-text-gradient;
      }
      .navbar-nav li a:hover {
          @include red-text-gradient();
          @include gold-gradient();
      }
  }
  </code></pre>
  
  <p><a href="https://codepen.io/samzalahi/pen/LOpXoy" rel="nofollow noreferrer">Codepen Demo</a></p>