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.

除非你真的重复使用你的徽标样式，否则这非常复杂。过度使用扩展可以导致更大的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; } }

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

1 个答案: