8722 sujets

Développement web côté serveur, CMS

Bonjour à tous,
Je suis entrain de suivre le cours Sass openclassrooms, hors je rencontre un problème.
On nous apprends les combinateurs (ici utilisé pour +.proj-prev) et l'imbriquation avec une esperluette pour éviter la répétition de texte (ici &__heading pour créer .proj-prev__heading) mais celà ne fonctionne pas. Le combinateur + fonctionne bien mais pas l'esperluette, est-ce que c'est normal Smiley sweatdrop ?
Si quelqu'un peut m'expliquer où est mon erreur.

Merci par avance. Lien de l'exercice où je rencontre le soucis : https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass/6598331-ecrivez-du-code-plus-propre-grace-aux-extensions-sass


<div class="container">
    <div class="form">
      <h1 class="form__heading">Titre formulaire</h1>
    </div>
    <div class="proj-prev">
      <h1 class="proj-prev__heading">Titre projet</h1>
    </div>
  </div>


.heading-typographie{
  font-size: 22px;
  color: #FFF;
  text-transform: uppercase;
}

.form{
  &__heading{
    @extend .heading-typographie;
  }
  +.proj-prev{
    background: yellow;
    &__heading{
      @extend .heading-typographie;
    }
  }
}
Modérateur
Salut,

tu peux tester ton code SASS avec https://www.sassmeister.com/

Ton code donnera :

.heading-typographie,
.form + .proj-prev__heading,
.form__heading {
  font-size: 22px;
  color: #FFF;
  text-transform: uppercase;
}

.form + .proj-prev {
  background: yellow;
}


Et ca m'a l'air correct. Qu'est-ce que tu en attendais ?
Modifié par _laurent (02 Feb 2021 - 22:21)
upload/1612362272-82180-capture.jpg Bonjour,
merci pour la réponse et le lien de test.

C'est effectivement la partie
&__heading{
      @extend .heading-typographie;
    }

en CSS :
.form + .proj-prev__heading


qui n'est pas pris en compte sur la console de code d'exercice du site de cours en ligne Smiley decu
du coup je pensais avoir fait une erreur dans mon sass.
Modifié par Magalirfl (03 Feb 2021 - 15:24)
Modérateur
Salut

Ah je vois mieux le soucis. c'est ni un soucis de SASS ni un soucis de ta console de code de l'exercice. C'est juste un soucis de sélecteur CSS.

Le + est un sélecteur d'adjacence directe mais .form et .proj-prev__heading ne sont pas cote a cote.... .form et .proj-prev le sont. Ce que tu cherche a faire c'est donc :
.form + .proj-prev .proj-prev__heading {}

mais un simple :
.proj-prev__heading {}

doit normalement faire le boulot, pas besoin de se compliquer la tache...
Meilleure solution
Ah mais oui le & récupère également le + de .proj_prev !
C'était vraiment histoire de tester car je ne trouve pas ça lisible, mais j'ai bien fait, je viens de comprendre une subtilité !
Merci beaucoup Smiley merci
Modifié par Magalirfl (03 Feb 2021 - 18:18)