SASS: все CSS после @include mixin игнорируются - PullRequest
Новая
       31

SASS: все CSS после @include mixin игнорируются

0 голосов
/ 18 декабря 2018

Что-то не так с этим кодом? 

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

all css после включения в приведенном выше коде оператор body игнорируется анализаторами

Я пересмотрел код выше, потому что случайно добавил дополнительный }, но это не было проблемой

Проблема в том, что сам миксин работает, как и ожидалось, но мой 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;
  }
}

И я пытаюсьВыясните, связана ли проблема с моим форматированием (которое кажется нормальным) или с приложением scout

1 Ответ

0 голосов
/ 18 декабря 2018

Вы должны поместить свой миксин, прежде чем позвонить.Кроме того, } было слишком много после элемента 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;
    }
}
...