sass mixin 可以嵌套media吗？

Question

@mixin bg-image($url) {
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixe-ratio:3) {
    img: url($url + "@3x.png");
  };
  img: url($url + "@2x.png");
}
引用代码：

    .brand
      display: inline-block
      width: 30px
      height: 18px
      background:
        size: 30px 18px
        repeat: no-repeat
        @include bg-image('brand')

报错代码：

./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-560c675e","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
Module build failed: 
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixe-ratio:3) {
 ^
      Illegal nesting: Only properties may be nested beneath properties.
      in D:\study\code\mySelf\outSell\src\common\sass\mixin.scss (line 17, column 3)
 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-560c675e","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue 4:14-412 13:3-17:5 14:22-420
 @ ./src/components/header/header.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

请问各位大牛 mixin是不是不可以嵌套 media使用，如果不可以的话 ，我这段代码应该怎么改？

Answer 1

问题已经解决了，
mixin 里面应该用

background:
  image:$url

而 sass中把 include 放到 background外面调用即可