Download - How Sass Can Simplify Responsive Design
![Page 1: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/1.jpg)
How Sass Can Simplify Responsive Design
The Mixin · June 28, 2013Alan Hogan
![Page 2: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/2.jpg)
Topics
Experiences taking a major website responsive
Simple, powerful Sass patterns
Lessons learned
Combining Sass and SMACSS in a responsive context
![Page 3: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/3.jpg)
Responsive Redesign Requirements
Must be functional (not responsive) IE8+
Great experiences required for:
modern desktop browsers
iOS, Android
![Page 4: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/4.jpg)
// fixed-width.css.sass$responsive: false@import "everything"
// responsive.css.sass$responsive: true@import "everything"
/* fixed-width.css: lighter-weight, non-responsive CSS.*/
/* responsive.css: at-media-this, responsive-that.*/
1 codebase, 2 builds
Sass CSS
![Page 5: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/5.jpg)
The Mixin, 3.2 style
“You can now pass a block of styles to a mixin for placement by the @content directive.”– Chris Eppstein announcing Sass 3.2
![Page 6: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/6.jpg)
@mixin sometimes { @if $some-var { @content }}
$some-var: true;
.x { @include sometimes { color: red; }}
.x { color: red;}
![Page 7: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/7.jpg)
@mixin sometimes { @if $some-var { @content }}
$some-var: false;
.x { @include sometimes { color: red; }}
.x { }
![Page 8: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/8.jpg)
@mixin retina { @media (min-pixel- ratio: 2) { @content }}
.x { @include retina { background-image: url([email protected]); }}
@media (min-pixel-ratio: 2) { .x { background-image: url([email protected]); }}
![Page 9: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/9.jpg)
// fixed-width.css.sass$responsive: false@import "everything"
// responsive.css.sass$responsive: true@import "everything"
/* fixed-width.css */(lighter-weight, non-responsive CSS)
/* responsive.css */(at-media-this, responsive-that.)
— our goal, again:
Sass CSS
![Page 10: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/10.jpg)
@mixin mobile { @if $responsive { @media(max-width: 320px) { @content; } }}
![Page 11: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/11.jpg)
@mixin desktop { @if $responsive { @media(min-width: 960px) { @content; } } @else { @content; }}
![Page 12: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/12.jpg)
.btn-primary { cursor: pointer; background-color: $corp-blue; @include mobile { width: 100%; } @include desktop { font-size: 1.2 * $font-size; }}
![Page 13: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/13.jpg)
$responsive: true;
![Page 14: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/14.jpg)
.btn-primary { cursor: pointer; background-color: #0090f2;}@media (max-width: 320px) { .btn-primary { width: 100% }}@media (min-width: 960px) { .btn-primary { font-size: 19px; }}
![Page 15: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/15.jpg)
$responsive: false;
![Page 16: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/16.jpg)
.btn-primary { cursor: pointer; background-color: #0090f2; font-size: 19px; }
![Page 17: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/17.jpg)
“Tablet” breakpoint redacted for brevity.
Actually used Susy mixins instead of @media directly.
Notes
![Page 18: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/18.jpg)
IE9 cannot size SVG responsively(width: 100%; height: auto only works on rasters)
IE9 lack of support for input placeholder="..." led to bugs
More Surprises
![Page 19: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/19.jpg)
.responsive { @media { ... }}.fixed-width { // ...}
Failed Approach: Based off class names
Unwanted extra speci"cityand
IE8 temper tantrums
![Page 20: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/20.jpg)
<div data-responsive-content= '{"desktop":"Desktop!"}'> Mobile first!
</div>
Doing Markup RightServer-side abstraction + responsive JS lib = easy
![Page 21: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/21.jpg)
Tough Calls.
SMACSS + Sass + Responsive
![Page 22: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/22.jpg)
Layouts
SMACSS:
.layout-icon-grid
.layout-two-column
Responsive:
Hey, this layout needs to change at breakpoints!
![Page 23: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/23.jpg)
composited of breakpoint-speci!c layouts
Approach: Semantic “Layouts”
![Page 24: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/24.jpg)
.layout-with-semantic-name { @include mobile { @extend .mobile-layout-x; } @include desktop { @extend .desktop-layout-y; }}
![Page 25: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/25.jpg)
.l-with-semantic-name { @include mobile { @extend .ml-x; } @include desktop { @extend .dl-y; }}
For our sanity
![Page 26: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/26.jpg)
Approach: Invent As Needed
![Page 27: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/27.jpg)
.layout-icon-grid { // A layout that works at all brkpts}.mobile-layout-linear { // Designed only for, and applies // only for, mobile screen sizes @include mobile { ... }}.desktop-layout-columns { // No effect on mobile @include desktop { ... }}
![Page 28: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/28.jpg)
Thank you!
Feedback welcome: ajh.us/talk-feedback
Code & shareable notes (soon): ajh.us/sass-talk
@alanhogan on Twitter, ADN, Instagram
Work: NoRedInk (grammar education)
![Page 29: How Sass Can Simplify Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022052505/55618754d8b42ace7d8b4641/html5/thumbnails/29.jpg)