Sass：在@media 查询中使用不同的占位符覆盖定义

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.

除非您实际上是在重复使用您的徽标样式，否则这非常复杂。过度使用 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; } }