web-dev-qa-db-fra.com

Moins: comment écrire: survoler et: concentrer

Je viens de commencer à apprendre moins et j'aimerais avoir un résultat comme celui-ci:

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

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

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

Je ne sais pas comment écrire cela dans Less. j'ai essayé

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

    }
    &:focus {

    }
}

mais ça ne marche pas. Veuillez aider. Merci.

cssless
29
Pelangi

C'est essentiellement le format correct pour l'imbrication, mais ce que vous attendez n'est pas clair. Vous vous attendez peut-être à la duplication du /* some rules */ dans le :hover et :focus (juste basé sur ce que vous montrez ci-dessus pour les entrées et sorties -- si ce n'est pas une bonne compréhension de votre problème, veuillez clarifier ). Cependant, ce n'est pas ainsi que fonctionne l'imbrication. L'imbrication ne récupère que la chaîne de sélection à laquelle attacher la pseudo-classe, elle ne remplit pas automatiquement les règles définies à l'extérieur dans . Vous devez être plus explicite comme l'une de ces options:

Option 1 (en utilisant l'imbrication)

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

Option 2 (tout comme CSS)

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

Option 3 (en utilisant l'imbrication avec un mixin)

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

.navbar .nav > li > a {
    .setRules();
    &:hover {
      .setRules();
    }
    &:focus {
      .setRules();
    }
}
41
ScottS