ちょっと横にそれた話になりますが、疑似要素とメディアクエリ。SCSSでのそれぞれの正しい書き方は以下らしいです。
.cls{
/* ここに基本スタイルを書くのは正しい */
&:before{
/* 疑似要素のスタイルはここに書くのが正しい */
}
@media screen and (max-width:1024px) {
/* スマホでのスタイルはここに書くのが正しい */
}
}
つまり、疑似要素は「&:疑似要素名{}」内に、メディアクエリはそのままメディアクエリ内に書くのが正しいらしいです（&は親要素セレクタを指すらしい）。
で、これらを踏まえて疑似要素とメディアクエリを組み合わせた書き方は以下のようになります。
.cls{
/* ここに基本スタイルを書く */
&:before{
/* ここに疑似要素のスタイルを書く */
@media screen and (max-width:1024px) {
/* 【NG！】疑似要素内でメディアクエリの指定は無視される */
}
}
/* ここにスマホでのスタイルを書く */
@media screen and (max-width:1024px) {
&:before{
/* 【OK！】スマホでの疑似要素のスタイルはここに書くのが正しい */
}
}
}
つまり、メディアクエリ→疑似要素、の書き方じゃないとダメだよということらしいです。
パッと探した感じこの組み合わせで引っかかった人いないみたいなんですが、ボクくらいしか引っかからないこと？
SCSSとやらの勉強をきちんとしたら引っかからないことなのかもしれないですが、ボクは勉強が嫌いなので。
