Skip to content

Instantly share code, notes, and snippets.

@nocke
Created November 17, 2017 16:28
Show Gist options
  • Save nocke/b8ab3ca8a28954bfb6fe7477572d60b1 to your computer and use it in GitHub Desktop.
Save nocke/b8ab3ca8a28954bfb6fe7477572d60b1 to your computer and use it in GitHub Desktop.
breakpoint macros (Sass)
// =below($size)
// @media only screen and (max-width: $size)
// @content
// =above($size)
// @media only screen and (min-width: $size)
// @content
// =lower($size)
// @media only screen and (max-height: $size)
// @content
// =higher($size)
// @media only screen and (min-height: $size)
// @content
$breakpoints: ("xs": 480px, "m": 768px, "l": 960px, "xl": 1200px)
=below($breakpoint)
$value: map-get($breakpoints, $breakpoint)
// if key exists in map, print media query, otherwise check for valid unit value
@if $value != null
@media (max-width: $value)
@content
@else if (not unitless($breakpoint))
@media (max-width: $breakpoint)
@content
@else
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map."
=above($breakpoint)
$value: map-get($breakpoints, $breakpoint)
// if key exists in map, print media query, otherwise check for valid unit value
@if $value != null
@media (max-width: $value+1)
@content
@else if (not unitless($breakpoint))
@media (min-width: $breakpoint+1)
@content
@else
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map."
// For each key in the map, created an own class
@each $name, $value in $breakpoints
.hide-#{$name}
+below($name)
display: none !important //we mean it. no override by some coincidental precedence
.show-#{$name}
+below($name)
display: block !important
.show-inline-#{$name}
+below($name)
display: inline !important
.test1
background: yellow
+below(xs)
background: orange
+below(700px)
background: purple
+above(xl)
background: green
+above(999px)
background: darkgreen
/depot/own/jekyll/_sass $ sass breakpoint.sass breakpoint.css && cat breakpoint.css
@media (max-width: 480px) {
.hide-xs {
display: none !important; } }
@media (max-width: 480px) {
.show-xs {
display: block !important; } }
@media (max-width: 480px) {
.show-inline-xs {
display: inline !important; } }
@media (max-width: 768px) {
.hide-m {
display: none !important; } }
@media (max-width: 768px) {
.show-m {
display: block !important; } }
@media (max-width: 768px) {
.show-inline-m {
display: inline !important; } }
@media (max-width: 960px) {
.hide-l {
display: none !important; } }
@media (max-width: 960px) {
.show-l {
display: block !important; } }
@media (max-width: 960px) {
.show-inline-l {
display: inline !important; } }
@media (max-width: 1200px) {
.hide-xl {
display: none !important; } }
@media (max-width: 1200px) {
.show-xl {
display: block !important; } }
@media (max-width: 1200px) {
.show-inline-xl {
display: inline !important; } }
.test1 {
background: yellow; }
@media (max-width: 480px) {
.test1 {
background: orange; } }
@media (max-width: 700px) {
.test1 {
background: purple; } }
@media (max-width: 1201px) {
.test1 {
background: green; } }
@media (min-width: 1000px) {
.test1 {
background: darkgreen; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment