web-dev-qa-db-fra.com

Sélecteur de parents moins immédiat

Moins permet de sélectionner le sélecteur parent ( http://lesscss.org/features/#parent-selectors-feature )

Comment obtenir le sélecteur parent immédiat, pas le sélecteur parent racine?

cssless
29
CMCDragonkai

Un exemple de base

Cela dépend en partie de la façon dont vous structurez votre code MOINS. Il n'existe actuellement aucun moyen de le faire avec une structure imbriquée normale. Cependant, prenez l'exemple suivant, où le .grandchild est notre cible finale dans tous les cas (il doit s'agir du niveau le plus externe - j'ai appelé ceci " groupe cible final " dans une réponse précédente avant MOINS de documentation supplémentaire sur l'utilisation de & comme sélecteur parent):

[~ # ~] moins [~ # ~] 

.grandchild {
  grandchild: 1;
  .child & {
    child: 1;
    .parent & {
      parent: 1;
      .grandparent & {
        grandparent: 1;

      }
    }
  }
}

Sortie CSS 

.grandchild  {
  grandchild: 1;
}
.child .grandchild  {
  child: 1;
}
.parent .child .grandchild  {
  parent: 1;
}
.grandparent .parent .child .grandchild  {
  grandparent: 1;
}

Comme vous pouvez le voir, tout code imbriqué au premier niveau n'a que la cible finale de .grandchild dans sa chaîne de sélection. À chaque niveau, on descend dans le nid, on monte en fait dans la spécificité du sélecteur. Donc, pour cibler uniquement le "parent immédiat" de la chaîne de sélection, placez-le dans le .child de cet exemple.

Les vol stationnaires fonctionnent toujours

[~ # ~] moins [~ # ~] 

.grandchild {
  grandchild: 1;
  &:hover {
    grandchildhover: 1;
  }
  .child & {
    child: 1;
    .parent & {
      parent: 1;
      .grandparent & {
        grandparent: 1;
        &:hover {
          grandchildhover: 1;
        }
      }
    }
  }
}

Cela ajoutera au css ci-dessus ces deux sorties:

.grandchild:hover {
  grandchildhover: 1;
}

.grandparent .parent .child .grandchild:hover {
  grandchildhover: 1;
}

Ignorer les générations

Vous pouvez le coder pour ignorer certaines générations, comme ceci:

[~ # ~] moins [~ # ~] 

.grandchild {
  grandchildonly: 1;
  .child & {
    withchild: 1;
    .parent & {
      withparentchild: 1;
    }
  }
  .parent & {
    skipgenchild: 1;
  }
}

Sortie CSS 

.grandchild {
  grandchildonly: 1;
}
.child .grandchild {
  withchild: 1;
}
.parent .child .grandchild {
  withparentchild: 1;
}
.parent .grandchild {
  skipgenchild: 1;
}

Distrait

Il existe différentes manières de résumer cela, de sorte que le code ne donne pas l'apparence d'un aspect imbriqué (ce qui pourrait dérouter un utilisateur). Quelque chose comme ça est une façon (sortie similaire à celle donnée dans les premier et deuxième exemples ci-dessus):

.addParent(@parent) { 
  @parentescaped: e(@parent); 
  @{parentescaped} & {.setWithParentProps(@parent);}
}

.grandchild {
  grandchild: 1;
  &:hover {
    grandchildhover: 1;
  }
  .addParent('.child');
  .setWithParentProps('.child'){
    child: 1;
    .addParent('.parent');
  }
  .setWithParentProps('.parent'){
    parent: 1;
    .addParent('.grandparent');
  }
  .setWithParentProps('.grandparent'){
    grandparent: 1;
    &:hover {
      morespecifichover: 1;
    }
  }
}

Commentaires finaux

Comme sept phases-max liées à dans son commentaire, il est question d'ajouter une précision générationnelle dans un contexte imbriqué normal . La solution donnée ici nécessite de penser "à l'opposé" de l'imbrication, mais plutôt de ne penser qu'à l'élément visé. Donc, la façon d'ajouter un .grandchild dans un autre sélecteur ce ne serait pas ça mixin:

MOINS (s'attendant à ajouter un parent par imbrication normale) 

.another-generational-parent {
  .grandchild;
}

Sortie CSS 

.another-generational-parent {
  grandchildonly: 1;
}
.child .another-generational-parent {
  withchild: 1;
}
.parent .child .another-generational-parent {
  withparentchild: 1;
}

Il serait préférable de l'ajouter dans le code d'origine en fonction de l'emplacement approprié, mais si cela n'est pas possible, une répétition est nécessaire (à moins que vous ne configuriez un moyen dans le code d'origine pour "insérer" les parents via un appel de mixage créatif - -Je n'ai pas le temps de me consacrer à ça ici).

.parent .child .grandchild {
  .another-generational-parent & {
     another-generational-parent: 1;
  }
}

La question de savoir si un tel codage opposé peut être utile ou non dépend entièrement des objectifs et des désirs de l'organisation du code MOINS.

35
ScottS