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;
    }
}

SASS：@include之后的所有css被忽略

1 个答案: