レスポンシブデザインのCSSをSCSSにまとめたい際のコードの書き方

Question

前提・実現したいこと

SCSSでの書き直しをしています。

そもそものことが分かっていないかもしれないのですが、ご教示ください。
今、CSSのデータが二つあります。
一つは、

• style.css(普通のCSS)
• responsive.css(携帯のレスポンシブ用のCSS)

これを、レスポンシブ用のCSSをなくして、SCSSに書き直すという作業が発生して、右も左も分からず
困っています。

初心者すぎて、申し訳ないです…

該当のソースコード

    <link rel="stylesheet" href="CSS/styles.css">
    <link rel="stylesheet" href="CSS/responsive.css" media="screen and (max-width:667px)">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

まずこの、htmlのlinkも、書き換える必要がありますか？？

勝手にファイルが生成されるので、それを活用して、

<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="CSS/style.css" media="screen and (max-width:667px)">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

としましたが、ここまででまず間違っていればご指摘がほしいです。。

そのうえで、例えば、
このレスポンシブのCSS(responsive.css)に記載されてある下記のコードを

@media(max-width : 700px){
.box,.box1,.box2,.box3,.box4{
width: auto;
}

SCSSに記載するとしたら、どういった書き方になるんでしょうか。

@mixin @media(max-width : 700px){
.box,.box1,.box2,.box3,.box4{
width: auto;
}

↑これは、box～box4の幅を、max-width : 700px　のときに全部autoにしたいのですが、
SCSSはどうなりますか？？

初めての質問で、的外れでしたらすみません。。
よろしくお願いいたします。

Answer 1

やりたいことは、旧style.cssと旧responsive.cssをコンパイルして1つのファイル「style.css」を
書き出すことだと理解しました。認識違いがあればご指摘ください。

以下、その前提で回答いたします。

---

[1] <link>の記述は以下です。
誤: <link rel="stylesheet" href="CSS/style.css" media="screen and (max-width:667px)">
正: <link rel="stylesheet" href="CSS/style.css">

---

[2] SCSS内に書く記述は、そのままで問題ありません。

前提として、CSSの記述をそのままSCSSファイルに貼り付けて、エラーが発生することはありません。

CSSの記述の仕方に加え、SCSS特有の"便利な記述の仕方"が可能となるだけです。
「SCSSだから、CSSの書き方ではなくSCSSの便利な書き方をしたほうが楽」ということはあっても
「SCSSだから、CSSの書き方のままだとエラーになる」ということはありません。

逆に以下の書き方は誤りではないかと思います。

@mixin @media(max-width : 700px){
.box,.box1,.box2,.box3,.box4{
width: auto;
}

SCSSはどうなりますか？？

試したことがないため推測ですが、
「@mixin @media」と書いてしまっているのでコンパイルエラーになるのではないかと思います。

Comments

[nomura02]

ありがとうございます。
<link rel="stylesheet" href="CSS/style.css">

が正とのことでしたが、

media="screen and (max-width:667px)
これは、SCSS内で定義するからいらないから、記載不要になるという認識で、合っていますか？

そうですね、@mixin @mediaの部分はコンパイルエラーになっています。

これまた、的外れな質問かもしれないのですが、
SCSSさんは、自分の中に書かれているCSSの中で、
@media(max-width : 700px) がついていれば、そのように変換してくれる
そして、それは、CSSだと出来ないこと
という認識で大丈夫ですか？

でも、それっていちいち書かなくちゃいけなくて、逆に見る人見にくくないかと思ったのですが、
そういうものですか？
私なら慣れていないせいもあってか、レスポンシブはレスポンシブで分けてもらった方が、
あとで直しやすいなと思うのですが…

[new1ro]

> <link rel="stylesheet" href="CSS/style.css">
>
> が正とのことでしたが、
>
> media="screen and (max-width:667px)
> これは、SCSS内で定義するからいらないから、記載不要になるという認識で、合っていますか？

そうです！ 合っています。

----------------
> @media(max-width : 700px) がついていれば、そのように変換してくれる
> そして、それは、CSSだと出来ないこと

CSSでも「@media(max-width : 700px)」の記述は可能です。
SCSSでしかできないと理解されているのなら、誤解です。

----------------
> でも、それっていちいち書かなくちゃいけなくて、逆に見る人見にくくないかと思ったのですが、
> そういうものですか？

そういうもの、というか、そういう書き方をしたほうが楽な場合はあります。

ブレークポイントが1つしかない場合は、ファイルをわけていたほうが楽かもしれません。
ブレークポイントが複数ありモバイルファーストな記述をする場合は、
ある要素についての記述が1箇所にまとまっているほうが楽だと思われます。

----------------
> 私なら慣れていないせいもあってか、レスポンシブはレスポンシブで分けてもらった方が、
> あとで直しやすいなと思うのですが…

まずSCSSを使う場合のメリットとして、複数の「.scss」のファイルを、1つのファイルにまとめて出力する機能があります。

style.scss
responsive.scss
xxxx.scss
↓
style.css (1つのファイルにまとまる)

つまり作業者は、レスポンシブに関する記述だけを"直したい"ときは「responsive.scss」を編集し、コンパイルすればOKです。

(「SCSSにする」ということは「編集するファイルを1つにまとめる」ということではありません。)

[nomura02]

よく分かる説明でした！新たな疑問が次から次へと出てきますが、少し分からないことがクリアになりました！！ありがとうございます！

Answer 2

    <link rel="stylesheet" href="CSS/style.css">

new1roさんが書かれているようにこれが正解です。
scssはコンパイルされた段階で1枚のシートになります。
style.scss で書かれているなら、style.css だけでOKなのです^^

/* メディアを入れるには、まず @mixin で @mediaを定義 */

$sp: 780px;
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

/* @include で呼び出す   */

.box,.box1,.box2,.box3,.box4{
    /* ここに本来の指定を記載 */

    @include sp{
        width: auto;
    }
}

@mixin は設定側、実際の呼び出しは @include です

このようにする事で
1か所に通常のスタイルとレスポンシブを書けるので
見やすく、メンテナンスも楽になるという事です^^

Comments

[new1ro]

> nomura02さん
補足として...

/* CSS、SCSSどちらでも可能な記述 */
@media (max-width: 780px) {

}

/ SCSSで可能な記述、CSSは不可 */
$sp: 780px;
@mixin sp {
@media (max-width: ($sp)) {
@content;
}
}

--------------------------------------------------
↑上記が理解できたら、

SCSSの機能としての以下の記述についてを調べてみてください。
・「@mixin」と「@include」
　→上記が理解できたら「@content」
・SCSSの変数
　→$好きな名前、今回だと「$sp」が変数です。

[nomura02]

「@mixin」と「@include」
は理解できました、変数も、理解です！ありがとうございます！
contentが分かりにくくて苦戦です。。色々説明は(https://tsudoi.org/weblog/2449/　とか)見たのですが、理解力が乏しく…
結局、この
@content;
って、要素のど真ん中に配置して何が便利なんでしょう？？
何が代入されるんでしょうか？

[-millmill-]

@content は @include (name) の中に書かれたものが入ります

@mixin sp ← の sp が名前
@content ← @include sp の中の実際のコード
--------------
@include sp{
width: auto;
}
---------------
なので ▲ これだと

@content = width: auto;
という事になります。

回答にも書きましたが、@include を使う事で
1つのクラスの中に

・ 通常のスタイルとブレークポイントを並べて書けるから変更しやすい
・決まったブレークポイント (max-width: 780pxとか) を共通で使えるので
何pxでブレークさせたっけ~?? が無くなります(笑

というのが便利な点ですね

[nomura02]

ありがとうございます！！非常に助かりました！
おかげ様で、Sassは書き上げることが出来ました！！