覆盖sass媒体查询混合

时间:2013-10-25 10:32:25

标签: sass media-queries mixins

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

在我的文档的顶部。

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

任何帮助都会很棒。

1 个答案:

答案 0 :(得分:3)

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

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