CODEWITHSUNDEEP
htmlcsssassstyling
Souvik Maity
Souvik Maity

Reputation: 75

Unable to style links in SCSS

I am trying to style the <a href=""></a> elements in my page. However, the following code isn't working.

HTML

<div class="class-name">
    The quick brown <a href="//example.com">fox</a>
</div>

SCSS

.class-name{
    @include mixin-name(1.7rem 5rem, 1.5rem, 300, $fade-white);
}
a{
    &:link{
        color: $fade-white;
        &:visited{
            color: $white;
            text-decoration: none;
            opacity: 0.42;
        }
    }
    &:hover{
        opacity: 0.7;
        text-decoration: underline;
    }
    &:active{
        opacity: 1;
        text-decoration: none;
    }
}

On hovering, the underline isn't appearing on the link. Also except for the hover, everything else is running on Safari but not on Chrome. Can anyone help what is going wrong here?

Upvotes: 1

Views: 5253

Answers (2)

Mark
Mark

Reputation: 6865

you SCSS is wrong, and there for the browser will not do the states you provide:

a {
   color: $fade-white;
   text-decoration: none;
   color: $white;

   &:visited{
    opacity: 0.42;
  }
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  &:active{
    opacity: 1;
    text-decoration: none;
  }
}

The :visited state will inherit from a declaration

Upvotes: 0

MattJHoughton
MattJHoughton

Reputation: 1118

Ran a quick test. Make sure your mixin is defined at the top. And make sure you start your link of with text-decoration none, so you can see it change

I also removed the :link - this is a CSS pseudo-class and it only works if your link has not been visited. Read up on it here

$fade-white : #eee;
$white : #ccc;

a{
  color: $fade-white;
  text-decoration: none;

  &:visited{
    color: $white;
    text-decoration: none;
    opacity: 0.42;
  }
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  &:active{
    opacity: 1;
    text-decoration: none;
  }
}

Upvotes: 1

Related Questions