[Résolu] Utiliser une classe SCSS imbriqué.

Salut à vous,
Je cherche comment céer un événement en JS qui changerait la classe d'un bouton quand on clic. Je débute en solo le JS.
J'y suis parvenu en utilisant une classe CSS mais pas en utilisant une classe imbriquée, SCSS.
Le nez dessus depuis plusieurs jours, sans avoir suffisamment de basses je ne trouve pas.

<section class="clic">
        <h2>CHANGEMENT DE COULEUR AU CLIC essai 2</h2>
        <button type="button" id="button-clic" class="button-color">Cliquez sur moi ...</button> 
    
    </section>
    
<script src="app.js"></script>
</body>

.button-color {
  display: block;
  font-size: 2rem;
  background-color: #e4d93f;
  padding: 2rem;
  margin: 50px auto;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(40, 100, 63, 0.384);
}
.button-color .btnew-color {
  background-color: #4c00ff;
}

let color=document.getElementById('button-clic'); 
color.addEventListener('click', function(){
       console.log('j\'ai cliqué');
       this.classList.toggle('button-color, btnew-color'); 

}) 

Un autre regard pour m'aider à comprendre ce qui cloche.
Vincent

Merci de t'être pencher sur ma question.
L'espace entre le parent et l'enfant est généré par SASS

.button-color{
    display:block;
    font-size: 2rem;
    background-color: rgb(228, 217, 63);
    padding:2rem;
    margin: 50px auto;
    border-radius: 3px;
    box-shadow: 5px 5px 5px rgba(40, 100, 63, 0.384); 
    .btnew-color{
        background-color:rgb(76, 0, 255);
    }
}

Qui me code en CSS

.button-color .btnew-color {
  background-color: #4c00ff;
}

J'ai malgré tout enregistrer directement dans le css final le parent et l'enfant collé, et mis uniquement l'enfant dans le java script sans que cela ne fonctionne. J'avais déjà tenté cette manipe mais sans avoir changé le CSS, j'étais plein d'espoir, grrrrr.
Merci

Re
Je viens aussi de modifier le nom de mes classes CSS en enlevant le - , et là ça fonctionne. Mais en enlevant l'espace entre le parent et l'enfant dans le CSS final.
Il va falloir que je trouve si je peux régler ça dans SASS et comment.
Merci

.buttoncolor {
  display: block;
  font-size: 2rem;
  background-color: #e4d93f;
  padding: 2rem;
  margin: 50px auto;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(40, 100, 63, 0.384);
}
.buttoncolor.btnewcolor { j'ai suprimer l'espace entre le parent et l'enfant
  background-color: #4c00ff;
}

let color=document.getElementById('button-clic'); 
color.addEventListener('click', function(){
       console.log('j\'ai cliqué');
       this.classList.toggle('btnewcolor');
 J\'ai suprimé - qu\'il y avait btnew-color

}) 

zancanaro a écrit :
Merci de t'être pencher sur ma question.
L'espace entre le parent et l'enfant est généré par SASS

.button-color{
    .btnew-color{
    }
}

Hello,

Oui. Une imbrication Sass crée par défaut un espace, donc un sélecteur de descendance.

Si tu souhaites supprimer cet espace, il faut te servir du signe "&", appelé sélecteur de parent dans Sass :

.button-color{
    &.btnew-color{
    }
}

Qui compile ainsi :

.button-color.btnew-color{ }

Plus d'info : https://sass-lang.com/documentation/style-rules/parent-selector

Salut,
Ok merci. J'avais en tête que & servait pour les pseudos classes.