Skip to content

Instantly share code, notes, and snippets.

@rbndelrio

rbndelrio/break-x.scss

Last active March 30, 2016 18:04
Show Gist options
  • Save rbndelrio/a2d55e0c45c1b410cd80 to your computer and use it in GitHub Desktop.
Save rbndelrio/a2d55e0c45c1b410cd80 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
break-x.scss
@mixin break-max($size) {
@media only screen and (max-width: $size) { @content; }
}
@mixin break-min($size) {
@media only screen and (min-width: $size + 1) { @content; }
}
//Example
$lgDesk: 1600px;
$mdDesk: 1200px;
$mobile: 768px;
$phone: 480px;
$smPhone: 360px;
@include break-min(lgDesk) {
//styles + such
}
// Alternatively:
.header--super-huge {
font-size: 90px;
@include break-max($phone) {
font-size: 30px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment