Не допускайте, чтобы миксы 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, но, похоже, это не работает для этого сценария.

Любое решение, руководство или совет? Спасибо,

0 ответов

Другие вопросы по тегам