SASS and LESS both have handy features to allow media queries to be written once and used throughout a project, but both have their own unique was of doing so.
Just as a refresher, here is a regular CSS media query. This one applies two styles to <img> elements, but only when the browser is in the screen category (as opposed to print) and the width of the page is less that 15ems.
@media screen and (max-width: 15em) {
img {
float:none;
width:100%;
}
}
This becomes very difficult to manage when you start using the same query in multiple places, or worse, when there is more than one type of media query. That's where our trusty pre-processors SASS or LESS come in. Not only do they allow us to write the media queries once and use everywhere, but we can place all of them together in their own isolated file to simplify future refactors.
SASS
For SASS it's built into the @mixin system. Version 3.2.0 brought with it the ability to include a block of content which you place the @content directive inside.
media-queries.scss
@mixin media-mobile {
@media screen and (max-width: 15em) {
@content;
}
}
Usage
@include media-mobile {
img {
float:none;
width:100%;
}
}
LESS
LESS' method for reuseable breakpoints actually turns out to be quite a bit nicer to write. You simply assign a variable an 'unquoted' (~) string and use @media and then the variable just like a regular media query.
media-breakpoints.less
@mobile-breakpoint: ~"screen and (max-width: 15em);"
Usage
@media @mobile-breakpoint {
img {
float:none;
width:100%;
}
}