SlideShare a Scribd company logo
How Sass Can Simplify
Responsive Design
The Mixin · June 28, 2013
Alan Hogan
Topics
Experiences taking a major website responsive
Simple, powerful Sass patterns
Lessons learned
Combining Sass and SMACSS in a responsive context
Responsive Redesign
Requirements
Must be functional (not responsive) IE8+
Great experiences required for:
modern desktop browsers
iOS, Android
1 codebase, 2 builds
Sass

CSS

// fixed-width.css.sass
$responsive: false
@import "everything"

/* fixed-width.css:
lighter-weight,
non-responsive CSS.
*/

// responsive.css.sass
$responsive: true
@import "everything"

/* responsive.css:
at-media-this,
responsive-that.
*/
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
@mixin sometimes {
@if $some-var {
@content
}
}
$some-var: true;
.x {
@include sometimes {
color: red;
}
}

.x {
color: red;
}
@mixin sometimes {
@if $some-var {
@content
}
}
$some-var: false;
.x {
@include sometimes {
color: red;
}
}

.x { }
@mixin retina {
@media (min-pixelratio: 2) {
@content
}
}
.x {
@include retina {
background-image:
url(foo@2x.png);
}
}

@media (min-pixelratio: 2) {
.x {
background-image:
url(foo@2x.png);
}
}
— our goal, again:
Sass

CSS

// fixed-width.css.sass
$responsive: false
@import "everything"

/* fixed-width.css */
(lighter-weight, nonresponsive CSS)

// responsive.css.sass
$responsive: true
@import "everything"

/* responsive.css */
(at-media-this,
responsive-that.)
@mixin mobile {
@if $responsive {
@media(max-width: 320px) {
@content;
}
}
}
@mixin desktop {
@if $responsive {
@media(min-width: 960px) {
@content;
}
}
@else {
@content;
}
}
.btn-primary {
cursor: pointer;
background-color: $corp-blue;
@include mobile {
width: 100%;
}
@include desktop {
font-size: 1.2 * $font-size;
}
}
$responsive: true;
.btn-primary {
cursor: pointer;
background-color: #0090f2;
}
@media (max-width: 320px) {
.btn-primary {
width: 100%
}
}
@media (min-width: 960px) {
.btn-primary {
font-size: 19px;
}
}
$responsive: false;
.btn-primary {
cursor: pointer;
background-color: #0090f2;
font-size: 19px;
}
Notes

“Tablet” breakpoint redacted for brevity.
Actually used Susy mixins instead of @media directly.
More Surprises

IE9 cannot size SVG responsively
(width: 100%; height: auto only works on rasters)
IE9 lack of support for input placeholder="..."
led to bugs
Failed Approach: Based off class names
.responsive {
@media { ... }
}
.fixed-width {
// ...
Unwanted extra specificity
}
and
IE8 temper tantrums
Doing Markup Right
Server-side abstraction + responsive JS lib = easy

<div data-responsive-content=
'{"desktop":"Desktop!"}'>
Mobile first!
</div>
SMACSS + Sass + Responsive
Tough Calls.
Layouts
SMACSS:
.layout-icon-grid
.layout-two-column

Responsive:
Hey, this layout needs to change at breakpoints!
Approach: Semantic “Layouts”
composited of breakpoint-specific layouts
.layout-with-semantic-name {
@include mobile {
@extend .mobile-layout-x;
}
@include desktop {
@extend .desktop-layout-y;
}
}
For our sanity

.l-with-semantic-name {
@include mobile {
@extend .ml-x;
}
@include desktop {
@extend .dl-y;
}
}
Approach: Invent As Needed
.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 { ... }
}
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)
How Sass Can Simplify Responsive Design

More Related Content

Similar to How Sass Can Simplify Responsive Design

Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
Nathan Smith
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
Itai Koren
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale
scottjehl
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Sanjoy Kr. Paul
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
 
Hardboiled Front End Development — Found.ation
Hardboiled Front End Development — Found.ationHardboiled Front End Development — Found.ation
Hardboiled Front End Development — Found.ation
Spiros Martzoukos
 
CSS3
CSS3CSS3
Advanced sass
Advanced sassAdvanced sass
Advanced sass
Kianosh Pourian
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Stefan Bauer
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
soovor
 
Modularization css with sass
Modularization css with sassModularization css with sass
Modularization css with sass
Huiyi Yan
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
kavi806657
 
@Agawish creating a stunning ui with oracle adf faces, using sass
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sass
Amr Gawish
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
Máté Farkas
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignSweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Mina Markham
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 

Similar to How Sass Can Simplify Responsive Design (20)

Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Hardboiled Front End Development — Found.ation
Hardboiled Front End Development — Found.ationHardboiled Front End Development — Found.ation
Hardboiled Front End Development — Found.ation
 
CSS3
CSS3CSS3
CSS3
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
 
Modularization css with sass
Modularization css with sassModularization css with sass
Modularization css with sass
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
@Agawish creating a stunning ui with oracle adf faces, using sass
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sass
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignSweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 

Recently uploaded

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 

Recently uploaded (20)

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 

How Sass Can Simplify Responsive Design