@contentを使う意味について

Question

@content
について、まだ分かって使ってないので、確認したいです…

@contentの存在意義？

@contentが無いと、Sassが上手く機能してくれないというのは分かるのですが…
なんとなく、mixinで定義してるものを重複して呼んでいる様な気がして、存在意義が良く分からないんです。

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

.container{
    width: auto;
    margin: 0 auto;
    @include sp{
        width: 100%;
    }
}


@mixinで、"sp"は、
@media (max-width:$(sp)){ 
@content 
}
}

だよっていうことを定義して、
@includeで、上記を呼び出してますよね。
これ、@contentが無かったら、
@includeで呼び出した@mediaの中身
width: 100%;
が、
反映されないことになってしまうということですか？
ということは、@contentは、@includeで呼び出されたもののに、何かかしら入りますっていう意味ですか？
でも@content消しても、エディタ上では、CSSにコンパイルされるんですよね。。
サスマイスターhttps://www.sassmeister.com/で確認して、ようやく

私なら、、、

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

これで、@includeで@media (max-width:($sp)){}呼び出せばいいんじゃないの？と思ってしまいます。
こちらで質問する時まで、その@media (max-width:($sp)){}の中に、@contentを入れるという発想がありませんでした。

@content
は
width: 100%;
のことと、
前回の質問で教えてもらったんですけども、
そもそもmixinでメディアクエリを呼び出して、そこに任意のコード(今回で言うとwidth: 100%;)を書くんだから、
@contentはいったいなんのためにあるんだ？？？
と疑問がぐるぐるぐる…

変な質問ですみません、よろしくお願いします。。

Answer 1

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

これだと、「空のメディアクエリを作る」という意味になります。

Comments

[nomura02]

早速のご回答、ありがとうございます！！
そうなんです、それが良く分からないんです。

私は、カラのメディアクエリを作りたいわけです。
で、その中に、
いろいろ書いていきたいので、カラでいいわけなんです！！！

@include sp{
}
で、mixinで指定した、
@media (max-width:($sp)){
}
がでてきて、その中にいろいろ書ければいいわけで…

どうして
@contentがわざわざ必要になるのかが知りたくて…

[maisumakun]

中括弧のブロックが1個しかなければ「そこに入れる」と推測できるかもしれませんが、ブロックが複数ある場合、どちらに入れればいいか（あるいはどちらにも書くのか）判別がつかなくなります。

[nomura02]

！！回答ありがとうございます！
核心に迫ってきている気がします！！

すみません、初心者すぎて申し訳ないのですが、
ちなみに、それはどういう状態ですか？？？
入れ子の時ということですか？

中括弧がある時点で、そこに何か書きたいから作ってるのであって、とうぜん@contentがなくても何かいれるに決まってるでしょと、人間側(私)は思ってしまいますよね。。
パソコン側には、どういう指示を出していることになっているんでしょうか？
それと何も中身に書かないのにわざわざ中括弧を作るシチュエーションがわからないです…

[maisumakun]

> 入れ子の時ということですか？

入れ子ではない、このような場合を考えていました。

.foo{
.bar{}
.baz{}
}

[nomura02]

ええ…( ﾟДﾟ)びっくりです
これ何ですか？
どういう状態…
謎が謎を呼んでおります…
これ入れ子じゃないんですか…？？？？？？
親と思われるクラス名{
別のクラス名{}
さらにまた別のクラス名{}
}

しつこくってすみません…
これどういう状況でしょうか…？？？？

[maisumakun]

CSSにコンパイルすると、

.foo .bar {}
.foo .baz {}

のようになります。

[nomura02]

ああそうか、なるほど。
そうですよね、しかし、これで何を表現したいんでしょうか？

.foo .bar {}
.foo .baz {}

仮に、htmlが、

<div class=foo>
<div class=bar><h1>あいうえお</h1><p>かきこけこ</p></div>
<div class=baz><h1>あいうえお</h1><p>かきこけこ</p></div>
</div>
だとして…
というかそもそもこんなhtmlにはならないですか？上記のCSSを用いるときは…

カラってどんな時ですか？

display:none
でもなく、
カラ…？

すみません。。。ここまで来たらどうしても分かりたいです…

[maisumakun]

空にして何かの役に立つものではなく、あくまで例として挙げただけです。

[maisumakun]

（上の例に中身を与えた場合、どちらの中括弧に入れればいいか、判別はつかないですよね？）

[maisumakun]

あと、

.foo{
color: yellow;
@content;
}

と、

.foo{
@content;
color: yellow;
}

では意味が違ってきます。このような細かな制御を行うには、「どこに入れるか」をコードで明記できる必要があります。

[nomura02]

しつこい中お付き合いいただきありがとうございます…

そうですね、どっちの中括弧に入れればいいか、
どっちにも入れないのか、どっちにも入れるのか、判別はつかないです。

なんとなく自分なりに咀嚼出来てきました。。
パソコン側としては、どっちもカラにする場合もあるわけで、
であれば必然的にカラにしないという意思表示もこちらからしないといけないわけで、
中身をどういう優先順位にするかどうかも教えてあげなくちゃいけないってこと
と解釈しました(もう哲学みたいになってすみません；；)