scssのincludeについて

Question

下記のコードについてなのですが、

<div class="about">
    <div class="container">
        <img src="/wp-content/themes/ill/img/page/front/front_about_pic_1.png" alt="">

        <div class="about_text">
            <h3>なりたい自分になれる場所<br>一人一人に合わせたトレーニング</h3>
            <p>体</p>
            <a href="">
                <p>詳しく見る</p>
            </a>
        </div>

    </div>

</div>

.about {
  @include container {
    display: flex;

    img {
    width: 50%;
    }
  }
}

scssの@includeで呼び出した中のflexとimgのwidthが反映されません。
@includeのcontainer自体は反映されております。

なぜなのか、またどのようにかいたらいいのか教えて頂きたいです。

Answer 1

@includeは@mixinとセットで使います

@mixin containerSet{
  display: flex;
}
@mixin containerImgSet{
  width: 50%;
}
.about {
  .container {
    @include containerSet;
    img {
      @include containerImgSet;
    }
  }
}

containerがclassじゃなくmixinの名前だった場合は
こんな感じの出力がほしい感じでしょうか。

@mixin aboutSet{
  display: flex;
}
@mixin aboutImgSet{
  width: 50%;
}
.about {
  @include aboutSet;
  img {
    @include aboutImgSet;
  }
}

Comments

[hurora]

回答いただきましてありがとうございます。
また丁寧にコード付きで教えていただいて感謝いたします。

@mixinで別のファイルで定義して、それを＠includeで呼び出していますので、解説頂いた上のコードは問題ないのですが、
@includeは

class名　｛　＠include ～～　　｝という使い方でできるけど

＠include ~~ { width: 50%; }のような使い方はできないということですかね？

[recal]

そうなりますね。