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,