$mq-breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px
) !default;
@mixin mq($from) {
$media-query: '';
$min-width: 0;
@if type-of($from) == number {
$min-width: px2em($from);
} @else {
$min-width: px2em(map-get($mq-breakpoints, $from));
}
@if $min-width != 0 {
$media-query: '#{$media-query} and (min-width: #{$min-width})';
}
$media-query: str-slice(unquote($media-query), 6);
@media #{$media-query} {
@content;
}
}
/*
Usage:
.foo {
color: red;
@include mq(tablet) {
color: green;
}
@include mq(desktop) {
color: orange;
}
@include mq(wide) {
color: yellow;
}
}
*/
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.