CODEWITHSUNDEEP
sassmedia-queriesmixins
user1910388
user1910388

Reputation: 235

Overriding sass media query mixins

I'm having trouble getting style to change as set within my media query mixing includes. I'm writing mobile first style then declaring the styles for larger screens within these media queries.

At the top of the doc I have.

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


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

Then throughout I have styles written like this:

.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;   
        }
   }

}

The style for large show up at the desired min-width but not the medium styles.

If I switch the mixing at the top to:

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

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

The styles change at min-width medium but not large.

How can I have the styles I want to take affect at the desired min-width?

My compiled CSS looks like this:

.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; } }

If I swap the mixins at the top it only compiles the one written at the top.

Any help would be great.

Upvotes: 1

Views: 2297

Answers (1)

cimmanon
cimmanon

Reputation: 68339

The problem is that you're defining your breakpoint mixin twice, which is causing the first one to be overwritten.

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

Upvotes: 3

Related Questions