{"id":154502,"date":"2013-10-30T06:33:22","date_gmt":"2013-10-30T13:33:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=154502"},"modified":"2014-09-13T08:09:58","modified_gmt":"2014-09-13T15:09:58","slug":"conditional-media-query-mixins","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/conditional-media-query-mixins\/","title":{"rendered":"Conditional Media Query Mixins"},"content":{"rendered":"
Sass makes working with media queries pretty excellent. You can nest them right within other blocks of CSS, which puts the properties and values you are changing right next to each other. That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain those changes separated by tons of other code or in a different file. We’ve covered this before. It was new in Sass 3.2<\/a>.<\/p>\n But since we’re likely to do that over and over again, we should abstract that media query away like we would any other variable.<\/p>\n It’s more common to see a @mixin be used though, in conjunction with Sass @content blocks. We covered this in the article Naming Media Queries<\/a>:<\/p>\n Which you use like this:<\/p>\n And there is no reason you can’t do both, abstracting away the media queries into variables, if you prefer the look of that:<\/p>\n Which has the exact same usage.<\/p>\n As an aside, I like “bp” as a name, because it’s something you have to type over and over and it’s short and sweet.<\/p>\n At a glance, it seems like the @mixin approach has limited value. Just using a variable is less verbose and makes just as much sense. However with the @mixin, we are granted additional powers!<\/p>\n Perhaps we want to create a version of a stylesheet which contains no media queries at all. This is absolutely reasonable in some circumstances. Perhaps we want to create an IE 8 and down stylesheet. Nicolas Gallagher toyed with using Sass for this<\/a> years ago, but this is slightly different. IE 8 and down do not natively support media queries so perhaps we decide we’re going to serve them<\/a> a stripped down stylesheet which does not include them at all. Old browsers like that are slower anyway, so instead of punishing them with additional code they can’t use, we’re helping them by serving them less. Sort of the Universal IE 6 Stylesheet<\/a> idea.<\/p>\n We can use a combination of conditional comments<\/a> to do that:<\/p>\n Another reasonable and real-world reason to serve a stylesheet stripped of media queries is if you have some pages of your site that use responsive design and some pages of your site that have a mobile-specific version. I think that’s reasonable.<\/a> The pages that have a mobile-specific version don’t really need those media queries in them.<\/p>\n So how do you create both a style.css<\/strong> and a style-NoMQs.css<\/strong> from the same source Sass? We use the power of our @mixin.<\/p>\n We use a logic condition within the bp @mixin which will either continue and output the media query, or output nothing.<\/p>\n You wouldn’t declare that variable right outside the @mixin though. You would declare it from your “master” file that @imports all the partials. So perhaps your style.scss file is:<\/p>\n And you create the “No Media Queries” version (style-NoMQs.css) by creating a style-NoMQs.scss:<\/p>\n Just change that variable to Big props to Cat Farman who wrote about this very idea in her Cognition article Fall Back to the Cascade<\/a>, with the slight variation of passing the support variable to the @mixin itself. (Is that safer?)<\/p>\n And as a final aside, I know many folks who don’t like how Sass outputs repetitive media queries in the final output, only “bubbling out” the media query as far as the bottom of the nesting. That’s necessary to honor the source-order-specificity of the selector (as I understand it). I’ve personally never worried about it since, since I always serve assets with GZip enabled, and GZip eats repetitive text for breakfast, it doesn’t change the file size that much. Not to mention browsers have no problem zooming through and applying those rules. However if you still don’t like that (or I’m wrong), there is a Grunt plugin<\/a> for that.<\/p>\n Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability to “shut off” those media queries if you need to, and there are some perfectly valid reasons to want to do that.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[476],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":352328,"url":"https:\/\/css-tricks.com\/proposal-for-css-when\/","url_meta":{"origin":154502,"position":0},"title":"Proposal for CSS @when","date":"September 21, 2021","format":false,"excerpt":"CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals. \ud83c\udf89 CSSWG just resolved to adopt @tabatkins when\/else proposal into the next level of CSS Conditionals. Here's the proposal:https:\/\/t.co\/IXEOK7xKcL\u2014 Mia, on Bass (@TerribleMia) September 15,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/css-media-query-when.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":191869,"url":"https:\/\/css-tricks.com\/approaches-media-queries-sass\/","url_meta":{"origin":154502,"position":1},"title":"Approaches to Media Queries in Sass","date":"December 30, 2014","format":false,"excerpt":"Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well. I spent a few months experimenting with a dozen different approaches to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17394,"url":"https:\/\/css-tricks.com\/media-queries-sass-3-2-and-codekit\/","url_meta":{"origin":154502,"position":2},"title":"Media Queries, Sass 3.2, and CodeKit","date":"July 5, 2012","format":false,"excerpt":"Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it. This isn't a brand new idea. Ben Schwarz did an excellent 7 minute video showing us\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/07\/executable.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":374670,"url":"https:\/\/css-tricks.com\/the-new-css-media-query-range-syntax\/","url_meta":{"origin":154502,"position":3},"title":"The New CSS Media Query Range Syntax","date":"October 31, 2022","format":false,"excerpt":"The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like , and =, that make more sense syntactically while writing less code for responsive web design.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/media-query-range-syntax.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374330,"url":"https:\/\/css-tricks.com\/early-days-of-container-style-queries\/","url_meta":{"origin":154502,"position":4},"title":"Early Days of Container Style Queries","date":"October 12, 2022","format":false,"excerpt":"We're still in suuuuuper early days with container queries. Too early for broad browser support, but Chromium already supports it, Safari started supporting it in version 16, and Firefox is presumably not far behind. Most early days conversations revolving around container queries usually compare the syntax to media queries. \/*\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":164669,"url":"https:\/\/css-tricks.com\/thoughts-media-queries-elements\/","url_meta":{"origin":154502,"position":5},"title":"Thoughts on Media Queries for Elements","date":"March 4, 2014","format":false,"excerpt":"Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/154502"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=154502"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/154502\/revisions"}],"predecessor-version":[{"id":182859,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/154502\/revisions\/182859"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=154502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=154502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=154502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.column-1-3 {\r\n width: 33.3333%;\r\n @media (max-width: 600px) {\r\n width: 100%;\r\n }\r\n}<\/code><\/pre>\n
$bp-babybear: \"(max-width: 600px)\";\r\n\r\n.column-1-3 {\r\n width: 33.33%;\r\n @media #{$bp-babybear} {\r\n width: 100%;\r\n }\r\n}<\/code><\/pre>\n
@mixin bp($point) {\r\n @if $point == papa-bear {\r\n @media (max-width: 1600px) { @content; }\r\n }\r\n @else if $point == mama-bear {\r\n @media (max-width: 1250px) { @content; }\r\n }\r\n @else if $point == baby-bear {\r\n @media (max-width: 600px) { @content; }\r\n }\r\n}<\/code><\/pre>\n
.sidebar {\r\n width: 33.33%;\r\n @include bp(baby-bear) {\r\n width: 100%;\r\n }\r\n}<\/code><\/pre>\n
@mixin bp($point) {\r\n \r\n $bp-babybear: \"(max-width: 600px)\";\r\n $bp-mamabear: \"(max-width: 1250px)\";\r\n $bp-papabear: \"(max-width: 1600px)\";\r\n\r\n @if $point == papa-bear {\r\n @media #{$bp-papabear} { @content; }\r\n }\r\n @else if $point == mama-bear {\r\n @media #{$bp-mamabear} { @content; }\r\n }\r\n @else if $point == baby-bear {\r\n @media #{$bp-babybear} { @content; }\r\n }\r\n\r\n}<\/code><\/pre>\n
<!--[if !IE 8]><!-->\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<!--<![endif]-->\r\n\r\n<!--[if gte IE 9]>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<![endif]-->\r\n\r\n<!--[if lte IE 8]>\r\n <link rel=\"stylesheet\" href=\"style-NoMQs.css\">\r\n<![endif]--><\/code><\/pre>\n
$MQs: true;\r\n\r\n@mixin bp($point) {\r\n @if ($MQs) {\r\n $bp-babybear: \"(max-width: 600px)\";\r\n $bp-mamabear: \"(max-width: 1250px)\";\r\n $bp-papabear: \"(max-width: 1600px)\";\r\n \r\n @if $point == papa-bear {\r\n @media #{$bp-papabear} { @content; }\r\n }\r\n @else if $point == mama-bear {\r\n @media #{$bp-mamabear} { @content; }\r\n }\r\n @else if $point == baby-bear {\r\n @media #{$bp-babybear} { @content; }\r\n }\r\n }\r\n}<\/code><\/pre>\n
$MQs: true;\r\n\r\n@import \"variables\";\r\n@import \"colors\";\r\n@import \"global\";\r\n\/* etc. *\/<\/code><\/pre>\n
$MQs: false;\r\n\r\n@import \"variables\";\r\n@import \"colors\";\r\n@import \"global\";\r\n\/* etc. *\/<\/code><\/pre>\n
false<\/code>, and the output CSS will contain no media queries at all.<\/p>\n
Other Approaches<\/h3>\n
\n