Question

我无法在我的媒体查询混合包含中设置更改样式。我正在编写移动优先风格，然后在这些媒体查询中声明更大屏幕的样式。

在我的文档的顶部。

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  }
}


@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}

然后在整个过程中我都有这样的样式：

.col-1-4 {
    width: 100%;
    padding: 0;

    @include breakpoint(medium) {
        width: 50%;
        padding-right: em(10);

        &:nth-child(2n) {  
            padding-right: 0;
            padding-left: em(10);   
        }

    }

    @include breakpoint(large) {
        width: 25%;

        &:nth-child(4n) { 
            padding-right: 0;   
        }
   }

}

大型的样式显示在所需的min-width但不是中等样式。

如果我将顶部的混音切换为：

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  }
}

样式在min-width medium处更改，但不会在large处更改。

如何在所需的最小宽度下使我想要影响的样式？

我编译的CSS看起来像这样：

.col-1-4 {
  width: 100%;
  padding: 0; }
  @media (min-width: 50em) {
    .col-1-4 {
      width: 25%; }
      .col-1-4:nth-child(4n) {
        padding-right: 0; } }

如果我在顶部交换mixins，它只会编写顶部写的那个。

任何帮助都会很棒。

Answer 1

问题是你要定义你的断点mixin两次，这会导致第一个被覆盖。

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  } @else if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}

覆盖sass媒体查询混合

1 个答案: