Skip to content

Instantly share code, notes, and snippets.

@marcialca
Last active August 29, 2015 14:07
Show Gist options
  • Save marcialca/6e90952cacfbcab7e184 to your computer and use it in GitHub Desktop.
Save marcialca/6e90952cacfbcab7e184 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, praesentium ipsam officia ratione laboriosam, aspernatur, consequatur dolorem quibusdam minima at, fuga aliquam? Maxime architecto, nesciunt ea impedit mollitia! Nesciunt, quia.</p>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
@function map-getter($listmap, $value) {
@each $item in $listmap {
$index: index($item, $value);
@if $index {
$return: if($index == 1, 2, $index);
@return nth($item, $return);
}
}
@return false;
}
$breakpoints: (
'small': '22.5em', //360px
'small portrait': ('22.5em', 'portrait'),
'medium': '45em', //720px
'medium portrait': ('45em', 'portrait'),
'large': '67.5em', //1080px
'large portrait': ('67.5em', 'portrait')
);
@mixin query($breakpoint, $orientation: 'none') {
$val: map-getter($breakpoints, $breakpoint);
@if $val == false {
@if type-of($breakpoint) == number {
@if $orientation != 'none' {
@media only screen and ("min-width": $breakpoint) and ("orientation": $orientation) {
@content;
}
}
@else {
@media only screen and ("min-width": $breakpoint) {
@content;
}
}
}
@else {
@error 'QUERY MIXINS ERROR: INVALID ARGUMENT'
}
}
@else {
@if type-of($val) == list {
@media only screen and ("min-width": nth($val, 1)) and ("orientation": nth($val, 2)) {
@content;
}
}
@else {
@if $orientation != 'none' {
@media only screen and ("min-width": $val) and ("orientation": $orientation) {
@content;
}
}
@else {
@media only screen and ("min-width": $val) {
@content;
}
}
}
}
};
body {
@include query('small', 'landscape') {text-transform: uppercase;};
@include query('small portrait') {background: red;};
@include query('medium') { border: 5px solid green;};
@include query('large') { font-weight: bold;};
@include query('large portrait') {padding: 100px;};
@include query(80, landscape) {margin: 80px;};
}
@media only screen and (min-width: 22.5em) and (orientation: landscape) {
body {
text-transform: uppercase;
}
}
@media only screen and (min-width: 22.5em) and (orientation: portrait) {
body {
background: red;
}
}
@media only screen and (min-width: 45em) {
body {
border: 5px solid green;
}
}
@media only screen and (min-width: 67.5em) {
body {
font-weight: bold;
}
}
@media only screen and (min-width: 67.5em) and (orientation: portrait) {
body {
padding: 100px;
}
}
@media only screen and (min-width: 80) and (orientation: landscape) {
body {
margin: 80px;
}
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, praesentium ipsam officia ratione laboriosam, aspernatur, consequatur dolorem quibusdam minima at, fuga aliquam? Maxime architecto, nesciunt ea impedit mollitia! Nesciunt, quia.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment