scssでの記述でハンバーガーメニューが上手くいかない。

Question

前提・実現したいこと

現在ハンバーガーメニューを作成しています。
それをscssで書いています。
cssなら全て上手く行くのですが、scssはまだ不慣れです。
spanタグで三本線を実現するとこまでは問題ないですが、jsで書いたactiveが機能しません。
scssとしての記述が間違っている気もしますがほぼお手上げです。
ご教授願います。

scssの該当部分にメモがきしております。

発生している問題・エラーメッセージ

scssで書くとハンバーガーメニューが動かない。

該当のソースコード

html

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

css
.btn {
position: relative;
background: #57a2c7;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 5px;
span {
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 45%;
&:nth-of-type(1){
top: 15px;
}
&:nth-of-type(2){
top: 23px;
}
&:nth-of-type(3){
top: 31px;

// ここから先が動かない。
&:active span:nth-of-type(1){
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
}
}
}

js
$(".btn").click(function(){
$(this).toggleClass('active');
});

### 試したこと

cssからscssに変換サービスで表示されたscssコードを入力。
ほか書き方の修正程度・


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。