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

Question

Я пытался использовать класс с псевдо-классом в менее смешанном css

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;
}

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

Answer 1

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

В любом случае, если вы просто пытаетесь добавить дополнительные стили к существующему стилю с помощью псевдо-селекторов, вы можете использовать оператор '&'. Это работает как ключевое слово 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;
  }
}

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

Answer 2

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

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

Если я думаю, что вы стремитесь к тому, чтобы повторно использовать ваши стили ссылок в ссылках :ited и:, вы на самом деле захотите:

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

a:link {
  .link;
}

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

Answer 3

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

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

например:

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

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