Prevent LESS mixins with duplicate pseudo classes from creating additional CSS definitions

218 views Asked by At

I have created a number of mixins to speed up setting anchor properties for each state. In this example I have a mixin for text-decoration and another for background-color.

.link-text-decoration(@default, @hover, @active, @visited)
{
    text-decoration: @default;
    &:hover
    {
        text-decoration: @hover;
    }
    &:active
    {
        text-decoration: @active;
    }
    &:visited
    {
        text-decoration: @visited;
    }
}

.link-background-color(@default, @hover, @active, @visited)
{
    background-color: @default;
    &:hover
    {
        background-color: @hover;
    }
    &:active
    {
        background-color: @active;
    }
    &:visited
    {
        background-color: @visited;
    }
}

When rendering as CSS I find instead of merging the pseudo classes it redeclares another.

LESS CSS calling the Mixins

.link
{
    .link-text-decoration(underline, none, none, underline);
    .link-background-color(#fff, #ccc, #ddd, #fff);
}

The Result

There a 2 instances of hover, active and visited.

.link {
  text-decoration: underline;
  background-color: #ffffff;
}
.link:hover {
  text-decoration: none;
}
.link:active {
  text-decoration: none;
}
.link:visited {
  text-decoration: underline;
}
.link:hover {
  background-color: #cccccc;
}
.link:active {
  background-color: #dddddd;
}
.link:visited {
  background-color: #ffffff;
}

Desired Result

Ideally I would like the values to appear as below as this would be much more efficient.

.link {
  text-decoration: underline;
  background-color: #ffffff;
}
.link:hover {
  text-decoration: none;
  background-color: #cccccc;
}
.link:active {
  text-decoration: none;
  background-color: #dddddd;
}
.link:visited {
  text-decoration: underline;
  background-color: #ffffff;
}

I've played with the Extend function and the examples on CSS Tricks, but this does not seem to work for this scenario.

Any solution, guidance, or advice? Thanks,

0

There are 0 answers