1

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

在我拥有的文档的顶部。

@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，它只会编译顶部写的那个。

任何帮助都会很棒。

4

1 回答 1

3

问题是您定义了两次断点混合，这导致第一个被覆盖。

@mixin breakpoint($point) {
  @if $point == medium {
    @media (min-width: em(480)) { @content; }
  } @else if $point == large {
    @media (min-width: em(800)) { @content; }
  }
}
于 2013-10-25T13:23:40.007 回答