The document discusses using Sass mixins to generate responsive breakpoints and media queries. It shows how to: 1. Create responsive breakpoints and styles for different screen widths using Sass mixins that generate the appropriate CSS media queries. 2. Target high resolution displays by generating different background images for retina and non-retina screens. 3. Fall back to styles without media queries for older browsers by passing different parameters to the breakpoint mixins or setting variables before importing partial Sass files.

1. Breakpoint

2. Simple example - Sass
$bp-small: 768px;
body {
color: #333;
@include breakpoint(max-width $bp-small) {
background-color: #efefef;
}
@include breakpoint($bp-small) {
font-size: 120%;
}
}

3. Simple example - CSS
body {
color: #333;
}
@media (max-width: 768px) {
body {
background-color: #efefef;
}
}
@media (min-width: 768px) {
body {
font-size: 120%;
}
}

4. ... so what?

5. More complex queries
$bp-sm-screen-and-phones: 'only screen' (max-width 760px),
max-device-width 900px;
.rwd-table {
@include breakpoint($bp-sm-screen-and-phones) {
/* responsive table styles */
}
}
Compiled:
@media only screen and (max-width: 760px),
(max-device-width: 900px) {
.rwd-table {
/* responsive table styles */
}
}

6. Resolution queries - Sass
$hidpi: min-resolution 1.5dppx;
.sprite-icon {
background-image: url('images/sprite.png');
@include breakpoint($hidpi) {
background-image: url('images/sprite2x.png');
}
}

7. Resolution queries - CSS
.sprite-icon {
background-image: url('images/sprite.png');
}
@media (min-resolution: 143dpi),
(-webkit-min-device-pixel-ratio: 1.48958),
(min--moz-device-pixel-ratio: 1.48958) {
.sprite-icon {
background-image: url('images/sprite2x.png');
}
}

9. Media query fallbacks
$bp-small: 768px;
body {
color: #333;
@include breakpoint(max-width $bp-small) {
background-color: #efefef;
}
@include breakpoint($bp-small, 'no-query' '.no-mqs') {
font-size: 120%;
}
}

10. Fallback class
body {
color: #333;
}
@media (max-width: 768px) {
body { background-color: #efefef; }
}
@media (min-width: 768px) {
body { font-size: 120%; }
}
.no-mqs body {
font-size: 120%;
}

11. Multiple-file fallbacks
$bp-small: 768px;
body {
color: #333;
@include breakpoint(max-width $bp-small) {
background-color: #efefef;
}
@include breakpoint($bp-small, 'no-query' true) {
font-size: 120%;
}
}

12. Multiple-file fallbacks
Style.scss:
// this sheet includes the queries
$breakpoint-no-queries: false;
@import 'mqs';
Style.css:
body {
color: #333;
}
@media (max-width: 768px) {
body { background-color: #efefef;}
}
@media (min-width: 768px) {
body { font-size: 120%; }
}
Oldie.scss:
// this sheet excludes the queries
$breakpoint-no-queries: true;
@import 'mqs';
Oldie.css:
body {
color: #333;
font-size: 120%;
}

13. Now let's do something fun...

16. ...with IE8 support (single file)

17. _variables.scss
_mixins.scss
_typography.scss
...
Mobile.scss
$breakpoint-no-queries: true;
$include-mobile-styles: true;
$include-desktop-styles: false;
@import //all the partials
Desktop.scss
$breakpoint-no-queries: true;
$include-mobile-styles: false;
$include-desktop-styles: true;
@import //all the partials
Responsive.scss
$breakpoint-no-queries: false;
$include-mobile-styles: true;
$include-desktop-styles: '.no-mqs';
@import //all the partials

18. The Sass...
$bp-small: 768px;
body {
color: #333;
@include breakpoint(max-width $bp-small,
'no-query' $include-mobile-styles) {
background-color: #efefef;
}
@include breakpoint($bp-small,
'no-query' $include-desktop-styles) {
font-size: 120%;
}
}

20. Thanks!
@RoboAndie