Que fait "& amp;" dans LESS CSS?

À essayer de comprendre ce que le & dans le code ci-dessous?

  .controls-container  {
        .flex-control-nav  {
            li a  {
                &.flex-active  {
                    filter: none;
                    background: @color_links!important;
                }
            }
        }
    }

Je sais que vous pouvez faire quelque chose comme &:hovermais ne connaissent pas bien de montrer une classe juste après?

source d'informationauteur Jared

  1. 16

    Je sais que vous pouvez faire quelque chose comme &:hovermais ne connaissent pas bien de montrer une classe juste après?

    C'est le même logique ici: chaînage de l'intérieur sélecteur à ce qui est représenté par l'extérieur sélecteur. Les Pseudo-classes comme :hover et des classes comme .flex-active se comportent de la même avec &.

    De la compilation que CSS entraînera une règle avec le sélecteur

    .controls-container .flex-control-nav li a.flex-active
  2. 6

    Compilateur remplace les "&" avec courant externe sélecteur de

    Cela permet de fournir des styles différents pour savoir :hover:active:before etc. ou de tout autre cas comme le vôtre.

    Dans votre cas, le plus intérieur sélecteur serait après la compilation ressembler à ceci en résultant fichier CSS:

    .controls-container .flex-control-nav li a.flex-active { ... }
  3. 5

    La & ajoute la mère de nidification de la structure où jamais le & peut se produire. Donc, comme d'autres l'ont noté, en mettant la & dans votre exemple, prend la pleine imbriquée chaîne de .controls-container .flex-control-nav li a et remplace la & dans votre code (dans ce cas) cause le .flex-active de la classe conjoint à la a tag...

    .controls-container .flex-control-nav li a.flex-active

    ...au lieu d'un enfant de la a tag...

    .controls-container .flex-control-nav li a .flex-active

    Si vous venez de penser à cela comme une "chaîne de remplacement" pour un sélecteur, il vous aidera à visualiser. Par exemple ceci (notez où j'ai mis le &)...

    .controls-container  {
    .flex-control-nav  {
        li a  {
            .flex-active & {
                filter: none;
                background: @color_links!important;
            }
        }
    }
}

    ...serait de produire ce sélecteur...

    .flex-active .controls-container .flex-control-nav li a

    ...comme il serait ajouter à la structure imbriquée après la classe .flex-active.