ハンバーガーメニューのアニメーションが動かない

Question

######ハンバーガーメニューをクリックしたときにクラスを追加してアニメーションするようなコードを書いているのですが、うまく作動しません。検証ツールで確認しましたが、activeのクラスは付けれていることから、jQueryの方は問題ないかと思います。スペルミスなども無いようにに感じるのですが、どこか違うとこはありますでしょうか？

<div class="btn">
   <button class="btn__header">
      <span></span>
      <span></span>
      <span></span>
   </button>
</div>

.btn{
  z-index: 100;
  display: flex;
  align-items: center;
  
  &__header{
      background-color: transparent;
      border: none;
      outline: none !important;
      cursor: pointer;
      
    & > span{
      background-color:white;
      width: 35px;
      height: 3px;
      display: block;
      margin-bottom: 5px;
      transition: transform 0.7s;
    }
    & :last-child{
      margin-bottom: 0;
    }
  }
}

.active{
    & .btn__header{
      & > span {
        &:nth-child(1) {
            transition-delay: 70ms;
            transform: translateY(11px) rotate(135deg);
        }
        &:nth-child(2) {
            transition-delay: 0s;
            transform:  translateX(-18px) scaleX(0);
        }
        &:nth-child(3) {
            transition-delay: 140ms;
            transform: translateY(-11px) rotate(-135deg);
        }
      }
    }
  }

$('.btn').click(function(){
  $('.btn__header').toggleClass('active');
});

Comments

[Lhankor_Mhy]

「うまく作動しません」とは、具体的には何が起きていますか？
もし、「メニューが表示されない」というようなことでしたら、ご提示のコードにメニューが含まれていないので、こちらでは確認することができません。

[Lhankor_Mhy]

あ、ハンバーガーメニューのアイコンがアニメーションしない、ということか……

Answer 1

以下のように変更するとどうですか？

.active{
//    & .btn__header{
    &.btn__header{

Comments

[kdh]

動きました！ありがとうございます。
＆の後のクラス名にはスペースを入れるものだと思っていました。
ここにはスペースを入れてはいけない規則などはあるのでしょうか？

[Lhankor_Mhy]

& を接頭辞として使う場合、スペースは必要ないです。

.hoge{
&_fuga{}
}

は

.hoge_fuga{}

とコンパイルされますが、

.hoge{
& _fuga{}
}

は

.hoge _fuga{}

とコンパイルされます。

つまり、コンパイル後にスペースが不要な場合は、SCSSにもスペースを入れてはいけません。

[kdh]

新しい知見でした！ありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです。