SASS Breakpoints?

[John]

https://engageinteractive.co.uk/blog/top-10-scss-mixins

I was at this page and I’m using the media queries breakpoint.
And then you would do for example .body { @include mq(‘phone-wide’) {background:red}. But from what I see you can a max but I’m not sure on how to exactly do that. Right now it outputs @media only screen and (min-width: 480px), but let’s say I want it to say @media only screen and (max-width: 480px) instead.

Any help would be greatly appreciated, or if anybody has a better media query breakpoint mixin.

[John]

I was just here and really like this: https://web-design-weekly.com/2013/05/12/handy-sass-mixins/

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }
}

Then I could have…

.text-slider .maintitle {
        @include breakpoint(large) { margin-top: 0; }   
        @include breakpoint(medium) { margin-top: 100px; }
        @include breakpoint(small) { margin-top: 200px; }
}

But I’d really like to include a min and max @media.

[John]

OK I firgured it out. This is just a rough example and I plan on fixing it up better.

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) and (max-width: 64.374em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }
}

Then in my scss file I would have…

.text-slider .maintitle {
        @include breakpoint(large) { margin-top: 0; }   
        @include breakpoint(medium) { margin-top: 100px; }
        @include breakpoint(small) { margin-top: 200px; }
}

and that would output…

@media (min-width: 64.375em) {
  .text-slider .maintitle {
    margin-top: 0;
  }
}

@media (min-width: 50em) and (max-width: 64.374em) {
  .text-slider .maintitle {
    margin-top: 100px;
  }
}

@media (min-width: 37.5em) {
  .text-slider .maintitle {
    margin-top: 200px;
  }
}

[John]

So this is what I ended up with. I do design mobile first, and the small break point is if I want to target small devices only, which would be really rare. The hero and site-logo is for targeting specific items only.

@mixin breakpoint($point) {
  @if $point == small {
    @media only screen and (max-width: 64em)  { @content; }
  }
  @if $point == medium {
    @media only screen and (min-width: 64.0625em) { @content; }
  }  
  @if $point == large {
    @media only screen and (min-width: 120em) { @content; }
  }
  @if $point == hero {
    @media only screen and (min-width: 72em) and (max-width: 99.9375em) { @content; }
  }
  @if $point == site-logo {
    @media only screen and (min-width: 1025px) and (max-width: 1359px) { @content; }
  }  
}

[Author]

Posts