Skip to content

Instantly share code, notes, and snippets.

@BPScott
Last active August 29, 2015 14:23
Show Gist options
  • Save BPScott/eaf7a20cb88120bcb5ec to your computer and use it in GitHub Desktop.
Save BPScott/eaf7a20cb88120bcb5ec to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
// An example of adding named aliases support to Sass-mq.
// Sass-mq is great for building out a single media query declaration. Much of
// the time though you don't use a declaration just once, you use it throughout
// your Sass codebase. Writing out potentially complex declarations multiple
// times may lead to mistakes, and if you need to change the query then you have
// to do it in multiple places. The CSS WG have identified this as a problem,
// and have added a spec for Custom Media Queries
// (http://dev.w3.org/csswg/mediaqueries-4/#custom-mq) that allow you to provide
// named aliases for longer and more complex media queries and use that instead.
// This is a little mixin that sits atop mq() and allows you to provide similar
// functionality in Sass. I've called it mq-alias(), but would also be correct
// to call it custom-mq() or named-mq() but that's approaching bikeshedding teritoriy.
// This isn't clever enough to support recursive custom names but then that's
// a fair bit of extra complexity for niche functionality that I cba dealing with for now.
@import "mq";
// These are the mq defaults but, we'll repeat them here
// so you can easily see what is going on
$mq-breakpoints: (
mobile: 320px, // 20em
tablet: 740px, // 46.25em
) !default;
// A map containg common argument lists that you want to pass to the mq mixin
// This would be empty by default
$mq-aliases: (
mobile-and-up: (from: mobile),
mobile-until-tablet: (from: mobile, until: tablet),
printed-landscape: (and: '(orientation: landscape)', media-type: print)
);
// The actual alias mixin!
// We're defering all the complicated stuff to the mq mixin, this is meerly a
// way of mapping names to argument lists
@mixin mq-alias($name, $aliases: $mq-aliases) {
@if map-has-key($aliases, $name) {
@include mq(map-get($aliases, $name)...) {
@content;
}
} @else {
@warn "Alias #{$name} wasn't found in aliases.";
}
}
// Thrown in as a compliment to mq-add-breakpoint
@mixin mq-add-alias($name, $args) {
$new-alias: ($name: $args);
$mq-aliases: map-merge($mq-aliases, $new-alias) !global;
}
//////////////////////////////////////////////
// Usage examples
//////////////////////////////////////////////
// Equivalent to calling mq($from: mobile)
@include mq-alias(mobile-and-up) {
body { content: 'mobile->*'; }
}
// Equivalent to calling mq($from: mobile, $until: tablet)
@include mq-alias(mobile-until-tablet) {
body { content: 'mobile->tablet'; }
}
// Equivalent to calling mq($and: '(orientation: landscape)', $media-type: print)
@include mq-alias(printed-landscape) {
body { content: 'printed landscape'; }
}
@media (min-width: 20em) {
body {
content: 'mobile->*';
}
}
@media (min-width: 20em) and (max-width: 46.24em) {
body {
content: 'mobile->tablet';
}
}
@media print and (orientation: landscape) {
body {
content: 'printed landscape';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment