Skip to content

Instantly share code, notes, and snippets.

@fdorantesm fdorantesm/media.sass
Last active Apr 22, 2018

Embed
What would you like to do?
Media query sass mixin helper
$screen-xs-max: 480px
$screen-sm-min: 481px
$screen-sm-max: 960px
$screen-md-min: 961px
$screen-md-max: 1280px
$screen-lg-min: 1281px
@mixin xs($max-width: true)
@if $max-width
@media only screen and (max-width: $screen-xs-max)
@content
@else
@media only screen and (min-width: $screen-xs-max + 1px)
@content
@mixin sm($min-width: true, $max-width: true)
@if $max-width and $min-width
@media only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
@content
@else
@if $min-width
@media only screen and (min-width: $screen-sm-min)
@content
@else
@media only screen and (max-width: $screen-sm-max)
@content
@mixin md($min-width: true, $max-width: true)
@if $max-width and $min-width
@media only screen and (min-width: $screen-md-min) and (max-width: $screen-md-max)
@content
@else
@if $min-width
@media only screen and (min-width: $screen-md-min)
@content
@else
@media only screen and (max-width: $screen-md-max)
@content
@mixin lg($max-width: true)
@media only screen and (min-width: $screen-lg-min)
@content
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.