sassの@mixinの仕様について

Question

サンプル1の出力では、a中に入れたspが.aの次の階層に来てるのに、
サンプル2の出力では、a中に入れたspが.aの上の階層に来てるはなぜでしょうか？

サンプル1

sass

@mixin sp {
  div {
  		@content;
  }
}

.a {
  @include sp {
    width: auto;
  }
}

css

.a div
{
    width: auto;
}

サンプル2

sass

@mixin sp {
  @media only screen and (max-width: 768px) {
  		@content;
  }
}

.a {
  @include sp {
    width: auto;
  }
}

css

@media only screen and (max-width: 768px)
{
    .a
    {
        width: auto;
    }
}

サンプル2はなぜこうならないのか？

css

.a
{
    @media only screen and (max-width: 768px)
    {
        width: auto;
    }
}

Answer 1

CSS では内側にメディアクエリーを書くとエラーで読み込まれなくなるので当然だと思います。

Comments

[msiqb]

成程。仕様ということですね。ありがとうございます。