15

私はlesscssミックスインでpsuedoクラスのクラスを使おうとしていました

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

私はここで何かが足りないのですか、それともミックスインはまだ疑似クラスをサポートしていませんか？

4

3 に答える 3

12

私も最初はこれに少し戸惑い、フープを飛び越えて動作させることに気づきました。あなたの投稿は十分に古いので、私が知っている限り、この機能よりも前のものである可能性があります。

とにかく、疑似セレクターを使用して既存のスタイルにスタイルを追加しようとしている場合は、「＆」演算子を使用できます。これは「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;
  }
}

残念ながら、公式の定義は、ドキュメントのネスティングルールの部分にはっきりと見えません。

于 2012-05-17T18:03:35.257 に答える
5

それがLessでmixinを使用する方法だとは思いません。

リンク疑似クラスを定義してから、訪問した疑似クラスの下にネストしました。これは実際には何の意味もありません。そのため、その出力が得られます。

あなたが目指しているのが：visitedと：link全体でリンクスタイルを再利用することだと思うなら、あなたは実際にこれが欲しいでしょう：

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

a:link {
  .link;
}

a:visited{
  .link;
  color: #84B6CD;
}
于 2011-05-16T04:50:22.557 に答える
-1

完全にはわからない、何を達成したいのか。しかし、：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 */
});
于 2016-01-18T18:49:27.150 に答える