Не допускайте, чтобы миксы LESS с дублирующими псевдоклассами создавали дополнительные определения CSS
Я создал несколько миксинов для ускорения установки свойств привязки для каждого состояния. В этом примере у меня есть миксин для text-decoration
и еще один для 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;
}
}
При рендеринге как CSS я нахожу вместо слияния псевдоклассов переопределяющий другой.
Меньше CSS, вызывающий Mixins
.link
{
.link-text-decoration(underline, none, none, underline);
.link-background-color(#fff, #ccc, #ddd, #fff);
}
Результат
Там 2 случая hover
, active
а также 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;
}
Желаемый результат
В идеале я хотел бы, чтобы значения отображались ниже, так как это было бы намного эффективнее.
.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;
}
Я играл с функцией Extend и примерами на CSS Tricks, но, похоже, это не работает для этого сценария.
Любое решение, руководство или совет? Спасибо,