Sassのmixinについてお尋ねさせてください。

先日SassをSCSS記法で学び始めました、
そこで少し方針に迷ったので意見を頂戴したく質問させていただきます。

例えば

HTML
1<body>
2    <header>
3        <div class="container">
4        </div>
5    </header>
6    <div class="top-wrapper">
7        <div class="container">
8        </div>
9    </div>
10    <footer>
11        <div class="container">
12        </div>
13    </footer>
14</body>

CSS
1.container {
2  width: 100%;
3  margin: 0 auto;
4  padding: 0 15px;
5  box-sizing: border-box;
6}

このようにdivタグを作ってまとめるか

HTML
1<body>
2    <header>
3    </header>
4    <div class="top-wrapper">
5    </div>
6    <footer>
7    </footer>
8</body>

Scss
1@mixin container {
2  width: 100%;
3  margin: 0 auto;
4  padding: 0 15px;
5  box-sizing: border-box;
6}
7
8header {
9  @include container;
10}
11
12.top-wrapper {
13  @include container;
14}
15
16footer {
17  @include container;
18}

このようにmixinを定義して使用するのか。

どちらのほうが望ましいのでしょうか？
また場合によって使い分けるといった場合にはどのような使い分けが好ましいのか
ご意見お聞かせいただけたら幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

状況や、実装したい内容によって変わります。
例えば、
今回のような場合であれば、クラス単体の前者で十分でしょう。
なぜなら、当てるスタイルがmixinのもののみだからです。

では、mixinの使いどころはというと、様々ありますが、
一番簡単なところでは、
追加のスタイルを、別セレクタに当てたいという場合でしょう。

例えば下記です。

scss
1@mixin container {
2  width: 100%;
3  margin: 0 auto;
4  padding: 0 15px;
5  box-sizing: border-box;
6}
7
8header {
9  background-color: green;
10  @include container;
11}
12
13.top-wrapper {
14  font-size: 0.8rem;
15  @include container;
16}
17
18footer {
19  border: #CCC solid 1px;
20  @include container;
21}