2

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,

  • 1
    There's method (similar to what used [here](http://stackoverflow.com/questions/26000660/less-css-retina-media-queries-without-redundancy/26007476#26007476), but it will need one extra line on use). However I'd suggest for your production CSS build just use `--clean-css="advanced"` option (or `clean-css` as a standalone build step) - it will merge those duplicates automatically. – seven-phases-max Dec 16 '14 at 00:37

0 Answers0