css - 萨斯 : overwrite definitions with different placeholder in @media query

Question

我有以下 scss:

@mixin logo($size:mobile) {

  @if $size == mobile {

    #logo {

      @extend %logoMobile;

      a {

        @extend %logoMobile;

      }

    }

  }
  @else {

    #logo {

      @extend %logoDesktop;

      a {

        @extend %logoDesktop;

      }

    }

  }

}

%fullWidth {
  width: 100%;
}

%logoMobile {
  @extend %fullWidth;
  height: 30px;
}

%logoDesktop {
  width: 211px;
  height: 35px;
}


#header {

  @include logo('mobile');

}

@media only screen and (min-width: 768px) {

  #header {

    @include logo('desktop');

  }

}

生成的css输出为:

#header #logo, #header #logo a {
  width: 100%;
}

#header #logo, #header #logo a {
  height: 30px;
}

知道为什么没有生成@media 查询吗？

Answer 1

不允许从媒体查询内部扩展存在于媒体查询外部的类。当你编译 Sass 文件时，控制台会告诉你:

DEPRECATION WARNING on line 12 of test.scss:
  @extending an outer selector from within @media is deprecated.
  You may only @extend selectors within the same directive.
  This will be an error in Sass 3.3.
  It can only work once @extend is supported natively in the browser.

DEPRECATION WARNING on line 14 of test.scss:
  @extending an outer selector from within @media is deprecated.
  You may only @extend selectors within the same directive.
  This will be an error in Sass 3.3.
  It can only work once @extend is supported natively in the browser.

除非您真的要重复使用您的 Logo 样式，否则这就太复杂了。过度使用 extend 会导致更大而不是更小的 CSS 文件，因此请小心使用它们。如果您必须使用媒体查询进行扩展，可以采用以下方法:

%logo {
    &, & a {
        width: 100%;
        height: 30px;
    }

    @media only screen and (min-width: 768px) {
        &, & a {
            width: 211px;
            height: 35px;
        }
    }
}

#header {
    #logo {
        @extend %logo;
    }
}

输出:

#header #logo, #header #logo a {
  width: 100%;
  height: 30px; }
@media only screen and (min-width: 768px) {
  #header #logo, #header #logo a {
    width: 211px;
    height: 35px; } }