記事の概要
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
作成日：2024-01-15
最終更新日：2024-01-15
記事の文字数：1630
Webサイト作成情報技術気ままな日記プログラミング
本記事のトピック
- SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
- どう書けばいいか
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
当然ですが本サイトでもCSSを使っています。
その中でメディアクエリ（@mediaなんちゃらって書くアレ）や疑似要素（::beforeとか::hoverとか）も当然使っています。
それで今までは以下のような書き方をしてたんです。
ただ、疑似要素はともかくメディアクエリが混ざってくるとCSS内もぐちゃぐちゃというか、同じような内容が全然別の場所に書かれてしまうようになってしまうので、 できればまとめて書きたくなります。
そこでSCSSという良いものがあり、その書き方を使うことで、メディアクエリをセレクタ内にネストして書くことができるらしいんです。
ということで、こんな風に書きました。
以下はダメだった例です。
ただこの書き方だと、疑似要素側のスタイルがスマホ（正しくは幅が1024px以下の画面）で適用されませんでした。
その中でメディアクエリ（@mediaなんちゃらって書くアレ）や疑似要素（::beforeとか::hoverとか）も当然使っています。
それで今までは以下のような書き方をしてたんです。
.cls{
/* ここに基本的なスタイル */
}
.cls::before{
/* ここに疑似要素のスタイル */
}
@media screen and (max-width:1024px) {
.cls{
/* ここにスマホでのスタイル */
}
.cls::before{
/* ここにスマホでの疑似要素のスタイル */
}
}
まぁ普通の書き方だと思います。ただ、疑似要素はともかくメディアクエリが混ざってくるとCSS内もぐちゃぐちゃというか、同じような内容が全然別の場所に書かれてしまうようになってしまうので、 できればまとめて書きたくなります。
そこでSCSSという良いものがあり、その書き方を使うことで、メディアクエリをセレクタ内にネストして書くことができるらしいんです。
ということで、こんな風に書きました。
以下はダメだった例です。
.cls{
/* ここに基本スタイルを書くのは変わらない */
@media screen and (max-width:1024px) {
/* ここにスマホでのスタイルを書ける */
}
}
.cls::before{
/* ここに疑似要素のスタイルを書く（動くが、SCSSではもっと良い書き方がある） */
@media screen and (max-width:1024px) {
/* 【NG！】ここにスマホでのスタイルを書ける……？ */
}
}
気持ちはわかると思います。だってもともと疑似要素は別々に書いてたじゃないですか。ただこの書き方だと、疑似要素側のスタイルがスマホ（正しくは幅が1024px以下の画面）で適用されませんでした。
どう書けばいいか
ちょっと横にそれた話になりますが、疑似要素とメディアクエリ。SCSSでのそれぞれの正しい書き方は以下らしいです。
で、これらを踏まえて疑似要素とメディアクエリを組み合わせた書き方は以下のようになります。
パッと探した感じこの組み合わせで引っかかった人いないみたいなんですが、ボクくらいしか引っかからないこと？
SCSSとやらの勉強をきちんとしたら引っかからないことなのかもしれないですが、ボクは勉強が嫌いなので。
ちなみにChatGPT4先生に生のCSS見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
.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とやらの勉強をきちんとしたら引っかからないことなのかもしれないですが、ボクは勉強が嫌いなので。
ちなみにChatGPT4先生に生のCSS見せて聞いたら、そもそもネストしてメディアクエリ書くこと自体ダメだって言われました
コメントログ
コメント投稿
