38

Less の学習を始めたばかりで、次のような結果を得たいと考えています。

.navbar .nav > li > a {
   /* some rules */
} 

.navbar .nav > li > a:hover {
   /* some rules */
} 

.navbar .nav > li > a:focus {
   /* some rules */
}

Less での書き方がわかりません。私は試した

.navbar .nav > li > a {
    /* some rules */
    &:hover {

    }
    &:focus {

    }
}

しかし、それはうまくいきません。助けてください。ありがとうございました。

4

1 に答える 1

54

これは基本的にネストの正しい形式ですが、何を期待しているのかは少しわかりません。おそらく、 andへの の重複を期待しているでしょう(入力と出力について上記に示したものに基づいています。それが問題を正しく理解していない場合は、 を明確にしてください)。ただし、ネストの仕組みはそうではありません。ネストは、疑似クラスをアタッチするセレクター文字列のみを取得し、その外部で定義されたルールを自動的に入力しません。次のオプションのいずれかのように、より明示的にする必要があります。/* some rules */:hover:focus

オプション 1 (ネストを使用)

.navbar .nav > li > a {
    /* some rules */
    &:hover {
      /* some rules */
    }
    &:focus {
      /* some rules */
    }
}

オプション 2 (CSS と同様)

.navbar .nav > li > a,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    /* some rules */
}

オプション 3 (ミックスインでネストを使用)

.setRules() {
    /* some rules you type once */
}

.navbar .nav > li > a {
    .setRules();
    &:hover {
      .setRules();
    }
    &:focus {
      .setRules();
    }
}
于 2013-06-28T02:02:59.430 に答える