1
votes

Existe-t-il une meilleure façon d'utiliser SASS et sélecteurs imbriqués dans ce scénario?

J'ai besoin de sélectionner un enfant d'un élément mais il est basé sur: last-of-type sur le parent.

J'ai essayé:

.assignment-selection {
  &__list-item {
    &__content {
      border-bottom: 1px solid;
    }
    &:last-of-type {
      .assignment-selection {
        &__list-item {
          &__content {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Lequel ne fonctionne pas à cause de la façon dont SASS construit.

J'ai fini avec:

&:last-of-type {
  &__content {
    border-bottom: 0;
  }
}

Y a-t-il une manière plus agréable / plus efficace d'écrire ceci?

css sass

1 commentaires

Je pense que .parent: last-of-type> .child en CSS standard devrait le faire

3 Réponses :

0
votes

Vous pouvez résoudre ce problème avec du CSS standard comme celui-ci (si c'est une option)

css:

<div class="parent">
  <li class="child">text</li>
</div>
<div class="parent">
  <li class="child">text</li>
</div>
<div class="parent">
  <li class="child">text</li>
</div>

html:

.parent>li {
  border: 1px solid red;
}

.parent:last-of-type>li {
  border: 1px solid green;
}

0 commentaires

1
votes

Cela devrait le faire

&:last-of-type > &__content {
  border-bottom: 0;
}

0 commentaires

0
votes

Le fait que SASS autorise l'imbrication ne signifie pas que nous devrions toujours imbriquer car cela rend CSS un peu illisible, encore plus dans les outils de développement du navigateur, ce qui rend le code plus difficile. à déboguer.

.assignment-selection {
  &__list-item {
    &__content {
      border-bottom: 1px solid;
    }
  }
}

.assignment-selection:last-of-type {
  &__list-item {
    &__content {
      border-bottom: 0;
    }
  }
}

0 commentaires