Using SASS breakpoint mixin

One of the SASS mixins that I used a lot is the breakpoint. It makes the media queries in SASS simple and elegant. But first get the mixin at https://github.com/at-import/breakpoint. We can now write our media queries in SASS in the following manner:

  
@import "stylesheets/breakpoint";
.menu {
  @include breakpoint($screen-xs) { 
    font-size: 1em;
  }
  font-size: 1.4em;
}
  

The CSS output:

  
.menu {
  font-size: 1.4em;
}
@media (min-width: 480px) {
  /* line 88, ../assets/sass/_header.scss */
  .menu {
    font-size: 1em;
  }
}
  

What if we want "max-width" as our mendia query feature instead of "min-width". Rewriting our SASS

  
@import "stylesheets/breakpoint";
@include breakpoint-set('default feature', max-width);
.menu {
  @include breakpoint($screen-xs) { 
    font-size: 1em;
  }
  font-size: 1.4em;
}
  

The CSS output:

  
.menu {
  font-size: 1.4em;
}
@media (max-width: 480px) {
  /* line 88, ../assets/sass/_header.scss */
  .menu {
    font-size: 1em;
  }
}