Question

I was trying to use a class with psuedo class in the less css mixin

a:link{
    color:#138CB4;
    text-decoration:none;
}
a:visited{
    a:link;
    color:#84B6CD;
}

But out put I got is this, which an invalid css

a:link{
    color: #138CB4;
    text-decoration: none;
}
a:visited{
    a: link;
    color: #84B6CD;
}

Am I missing something here or mixins don’t support pseudo classes yet.

Answer 1

I don’t believe that is how you use mixin’s in Less.

You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn’t actually mean anything and is why your are getting that output.

If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:

.link {
  color: #138CB4;
  text-decoration: none;
}

a:link {
  .link;
}

a:visited{
  .link;
  color: #84B6CD;
}