Есть ли способ использовать псевдо-классы css как mixins с lesscss-компиляторами?

Я пытался использовать класс с классом psuedo в менее css mixin

a:link{
    color:#138CB4;
    text-decoration:none;
}
a:visited{
    a:link;
    color:#84B6CD;
}

Но я получил это, что недопустимый css

a:link{
    color: #138CB4;
    text-decoration: none;
}
a:visited{
    a: link;
    color: #84B6CD;
}

Я что-то пропустил, или mixins еще не поддерживают псевдо-классы.

Ответ 1

Я не верю, что вы используете mixin в Less.

Вы определили псевдо-класс ссылки, а затем вложили его под посещенный псевдокласс. Это на самом деле ничего не значит, и почему вы получаете этот результат.

Если я думаю, на что вы нацелены, нужно повторно использовать свои стили ссылок через: visited и: link, вы действительно захотите этого:

.link {
  color: #138CB4;
  text-decoration: none;
}

a:link {
  .link;
}

a:visited{
  .link;
  color: #84B6CD;
}

Ответ 2

Вначале я был немного смущен этим и обнаружил, что прыгаю через обручи, чтобы заставить его работать. Хотя ваш пост достаточно стар, чтобы он мог предварительно установить эту функциональность для всего, что я знаю.

В любом случае, если вы просто пытаетесь добавить дополнительные стили к существующему стилю с помощью псевдоселекторов, вы можете использовать '&' оператор. Он работает как ключевое слово 'this' и превращает его в простое сочетание. Поэтому вы должны уметь:

a {
  color: #138CB4;
  text-decoration: none;

  &:visited {
    color: #84B6CD;
  }
}

Это должно скомпилировать что-то вроде:

a {
  color: #138CB4;
  text-decoration: none;
}

a:visited {
    color: #84B6CD;
}

Обратите внимание, что вы также можете использовать и объединить "подселектора":

.outer {
  color: blue;

  .error {
    //this will select elements that are .error inside-of/descending-from .outer
  }

  &.error {
    //This will select elements that are .outer AND .error
    color: red;
  }
}

Официальное определение, к сожалению, скрыто в виде правил вложения в документации.

Ответ 3

Не совсем уверен, чего вы хотите достичь. Но если вам надоело: link,: visted,: active (aka normal link) vs.: focus,: hover (hover styles), это работает:

.anchor( @- ) {
    a, a:link, a:visited, a:active {
        @-();
    }
}
.anchorH( @- ) {
    a:focus, a:hover {
        @-();
    }
}

например:

.anchor({
    background: #fff;
});

.anchorH({
    background: #ddd; /* darken on hover or focus */
});