Skip to content

Instantly share code, notes, and snippets.

@lucasdinonolte
Created August 5, 2014 17:35
Show Gist options
  • Select an option

  • Save lucasdinonolte/17c3714786945a0d7c13 to your computer and use it in GitHub Desktop.

Select an option

Save lucasdinonolte/17c3714786945a0d7c13 to your computer and use it in GitHub Desktop.
Quick exemplary responsive SASS Setup
$max-page-width: 1600px
$min-page-width: 320px
$compact-max-page-width: 500px
$break-xsmall: 320px
$break-small: 480px
$break-medium: 700px
$break-large: 880px
$break-xlarge: 1280px
@mixin between($min, $max)
@media only screen and (min-width: $min) and (max-width: $max)
@content
@mixin respond-to($media)
@if $media == xsmall
@media only screen and (min-width: $break-xsmall)
@content
@else if $media == small
@media only screen and (min-width: $break-small)
@content
@else if $media == medium
@media only screen and (min-width: $break-medium)
@content
@else if $media == large
@media only screen and (min-width: $break-large)
@content
@else if $media == xlarge
@media only screen and (min-width: $break-xlarge)
@content
@else
@media only screen and (min-width: $media)
@content
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment