SASS：@include 一个 mixin 之后的所有 css 都被忽略

Question

这段代码有问题吗？

@mixin background2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

      $at1x_path: "#{$path}.#{$ext}";
      $at2x_path: "#{$path}@2x.#{$ext}";

      background-image: url("#{$at1x_path}");
      background-size: $w $h;
      background-position: $pos;
      background-repeat: $repeat;

      @media all and (-webkit-min-device-pixel-ratio : 1.5),
      all and (-o-min-device-pixel-ratio: 3/2),
      all and (min--moz-device-pixel-ratio: 1.5),
      all and (min-device-pixel-ratio: 1.5) {
        background-image: url("#{$at2x_path}"); 
      }
    }



    @media screen and (max-width: 768px){
          .navbar-toggle[aria-expanded="true"] {
             @include background2x("../images/navigation/menu-button-expanded",png,60px, 60px,left,no-repeat);
          }
          body {
             background:#ff0000;
          }
       }

包含后的所有css，在上述代码中，body 语句被解析器忽略

我修改了上面的代码，因为我不小心添加了一个额外的}，但这不是问题

问题是 mixin 本身可以按预期工作，但是我的 sass 编译器 (scout-app) 给了我 错误

@media screen and (max-width: 768px) {
  .navbar-toggle[aria-expanded=true] {
    background-image: url("../images/navigation/menu-button-expanded.png");
    background-size: 60px 60px;
    background-position: left;
    background-repeat: no-repeat;
  }

}

虽然我希望得到 好

@media screen and (max-width: 768px) {
  .navbar-toggle[aria-expanded=true] {
    background-image: url("../images/navigation/menu-button-expanded.png");
    background-size: 60px 60px;
    background-position: left;
    background-repeat: no-repeat;
  }

  body {
    background: #ff0000;
  }
}

我正在尝试找出问题出在我的格式（这似乎没问题），还是与侦察应用程序有关

Answer 1

你必须在调用之前放置你的 mixin。此外，body 元素后面还有太多的}。 这应该工作：

@mixin background2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

@media screen and (max-width: 768px){
   .navbar-toggle[aria-expanded="true"] {
     @include background2x("../images/navigation/menu-button-expanded",png,60px, 60px,left,no-repeat);
    }
    body {
       background:#ff0000;
    }
}