SlideShare a Scribd company logo
FROM CSS
TO SASS IN
WORDPRESS
James Steinbach WP Summit 2014
@jdsteinbach #wpsummit .
1
BENEFITS OF SASS
•  Code organization (partials, nesting)
•  Faster styling (mixins, functions)
•  Scalable code (logic, variables)
2
NOT LIKE THIS:
3
MORE LIKE THIS:
4
CONVERT A STYLESHEET TO
SASS
So where do we even start?
5
THE BARE MINIMUM
•  CSS is valid Sass:
–  change style.css to style.scss
–  edit
–  compile back to style.css
6
SETTING UP PARTIALS
•  Copy each “section” of style.css to a separate
.scss file in your /sass/ folder.
•  Name the file after what it does with an
underscore prefix.
–  Example: styles relating to your navigation go to
_navigation.scss
•  Import that partial in your main style.scss file.
–  @import 'navigation';
7
REFACTOR AS NECESSARY
.header .logo {
//styles
}
.header .tagline {
//styles
}
.header .menu {
//styles
}
.header {
.logo {
//styles
}
.tagline {
//styles
}
.menu {
//styles
}
}
8
REFACTOR AS NECESSARY
.menu a {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
}
.menu a {
@include transition(color 0.2s);
}
9
COMPILE YOUR SASS FOR
WP
Now that we broke it down, how do we
put it back together?
10
WP REQUIREMENTS
•  Theme root contains style.css with WP
comments
•  All Sass files in a subdirectory to keep theme root
clean
•  Ability to compress output for deployed code
•  Avoid long, complex command line code
11
CLI COMPILE METHODS
•  Sass CLI
–  Compile:
sass style.scss style.css
–  Watch:
sass --watch style.scss style.css
•  Compass CLI
–  Watch:
compass watch
12
GUI COMPILE METHODS
•  Codekit: incident57.com/codekit
•  Koala: koala-app.com
•  Scout: mhs.github.io/scout-app
•  Compass.app: compass.kkbox.com
13
COMPASS WATCH
•  Easiest CLI syntax:
compass watch
•  Config.rb file for options:
–  File path (keep style.css in the right place)
–  Output
expanded
compressed
14
MY COMPASS CONFIG.RB
•  Lives in /theme/sass/
–  style.css goes up a level to theme root
css_dir = '..'
–  sass files live in same /sass/ directory as config.rb
sass_dir = ''
–  development setting
output_style = :expanded
–  deployment setting
output_style = :compressed
15
WP STYLE.CSS COMMENTS
•  style.scss in /theme/sass/
•  Include '!' to preserve comments in :compressed output
/*!
Theme Name: Sassy Theme
Theme URI: http://jamessteinbach.com/
Author: James Steinbach
Author URI: http://jamessteinbach.com
Description: From CSS to Sass
*/
@import 'variables';
@import 'bourbon/bourbon';
//etc all your other imports…
16
ORGANIZE YOUR PARTIALS
Can I make all these new files easier to
maintain?
17
CASCADES STILL MATTER
•  Import your broadest styles first.
•  Import your most specific styles last.
18
USE FOLDERS
•  Group your .scss partials into folders:
–  Base (variables, mixins, reset, typography)
–  Layout (grid, header, footer)
–  Components (buttons, menus, forms, widgets)
–  Pages (home, landing page, portfolio)
–  3rd Party (plugins, vendors, etc)
19
FULL DISCLOSURE
•  My Sass folder structure is not usually this
detailed.
–  /bourbon/
–  /neat/
–  /underscores/ (blank theme styles)
–  All my partials (from _variables.scss to _home.scss)
20
TRY THESE SASS TOOLS
Are there any other tricks for making this
workflow better?
21
BOURBON
•  Advanced Measurement/Color Functions
–  golden-ratio(16px, 1);
returns 25.888px
–  strip-units(12px);
returns 12
–  tint(#330000, 50%);
returns #997f7f;
–  rem(24px);
default $em-base: 16px, returns 1.5rem
22
BOURBON
•  Prefixing Mixins
–  @include animation();
–  @include background-image();
–  @include columns();
–  @include flexbox();
–  @include transform();
–  @include font-feature-settings();
23
BOURBON NEAT
$grid-columns: 12;
$gutter: 1em;
.container {
@include outer-container();
}
.grid-item {
@include span-columns(3);
}
24
MY MIXINS: BREAKPOINTS
$breakpoints: (small: 600px, large: 920px);
@mixin breakpoint($name) {
@if not index(map-keys($breakpoints),
$name) {
@warn "Invalid breakpoint '#{$name}'.";
} @else {
@media (min-width: map-
get($breakpoints, $name)) {
@content;
}
}
}
25
MY MIXINS: FONT SIZES
$font-sizes: (sm: 14, p: 16, bq: 20,
ssh: 24, sh: 30, h: 32, hero: 48);
@each $label, $size in $font-sizes {
%#{$label} {
font-size: $size * 1px;
font-size: rem($size);
}
.page-title { @extend %h; }
26
MY MIXINS: ABS. POSITION
@mixin abs($t,$r,$b,$l) {

position: absolute;
top: $t;
right: $r;

bottom: $b;
left: $l;
}
27
MY MIXINS: FONT-SMOOTHING
@mixin font-smoothing($val) {
@if $val == 'antialiased' or $val ==
'subpixel-antialiased' {
-webkit-font-smoothing: $val;
-moz-osx-font-smoothing: $val;
} @else {

 @warn 'Invalid value.'
}
}
28
RESOURCES
Where do I get more information?
29
ADDITIONAL READING
•  “Compass Compiling and WordPress Themes,” Chris
Coyier - css-tricks.com/compass-compiling-and-
wordpress-themes/
•  “How to Use Sass with WordPress,” Andy Leverenz -
elegantthemes.com/blog/tips-tricks/how-to-use-sass-
with-wordpress-a-step-by-step-guide
•  “Get Your Sass in Line,” Micah Godbolt - godbolt.me/
blog/get-your-sass-in-line.html
•  “Architecture for a Sass Project,” Hugo Giraudel -
sitepoint.com/architecture-sass-project/
30
DOCUMENTATION
•  Sass: sass-lang.com
•  Compass: compass-style.org
•  Bourbon: bourbon.io/docs
•  Bourbon Neat: neat.bourbon.io/docs
•  SassMeister App: sassmeister.com
31
JAMES STEINBACH
Senior Front End Developer
The Idea People in Charlotte, NC
@jdsteinbach | jamessteinbach.com/blog
32

More Related Content

What's hot (11)

PDF
Sass and compass workshop
Shaho Toofani
 
PDF
Semantics, less and sarcasm
Vincent Baskerville
 
ODP
Deep dive into sass
Knoldus Inc.
 
PPTX
Sass presentation
Марко Ковачевић
 
PPT
Why less?
Bunlong Van
 
PPTX
.Less - CSS done right
Daniel Hölbling
 
ODP
Sass presentation
Davin Abraham
 
KEY
Authoring Stylesheets with Compass & Sass
chriseppstein
 
PDF
Responsive web design
Sean Wolfe
 
PPTX
SASS - Syntactically Awesome Stylesheet
Neha Sharma
 
PPTX
Cat stand up </div>
Mahmoud Metwally
 
Sass and compass workshop
Shaho Toofani
 
Semantics, less and sarcasm
Vincent Baskerville
 
Deep dive into sass
Knoldus Inc.
 
Why less?
Bunlong Van
 
.Less - CSS done right
Daniel Hölbling
 
Sass presentation
Davin Abraham
 
Authoring Stylesheets with Compass & Sass
chriseppstein
 
Responsive web design
Sean Wolfe
 
SASS - Syntactically Awesome Stylesheet
Neha Sharma
 
Cat stand up </div>
Mahmoud Metwally
 

Similar to From CSS to Sass in WordPress (20)

PDF
Create SASSy web parts in SPFx
Stefan Bauer
 
PDF
[Bauer] SASSy web parts with SPFX
European Collaboration Summit
 
PPTX
SASS is more than LESS
Itai Koren
 
PDF
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
PDF
CSS Workflow. Pre & Post
Anton Dosov
 
PDF
Getting Started with Sass & Compass
Rob Davarnia
 
PPTX
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
PDF
LESS(CSS Pre Processor) introduction
rushi7567
 
PDF
Preprocessor presentation
Mario Noble
 
PPT
UNIT 3.ppt
kavi806657
 
PPTX
Doing More With Less
David Engel
 
PDF
LESS : The dynamic stylesheet language
Katsunori Tanaka
 
KEY
Advanced Technology for Web Application Design
Bryce Kerley
 
PDF
CSS 開發加速指南-Sass & Compass
Lucien Lee
 
PPT
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
 
PPTX
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
 
PDF
CSS Extenders
Idan Gazit
 
KEY
Advanced sass
Kianosh Pourian
 
PDF
Dallas Drupal Days 2012 - Introduction to less sass-compass
c l
 
Create SASSy web parts in SPFx
Stefan Bauer
 
[Bauer] SASSy web parts with SPFX
European Collaboration Summit
 
SASS is more than LESS
Itai Koren
 
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
CSS Workflow. Pre & Post
Anton Dosov
 
Getting Started with Sass & Compass
Rob Davarnia
 
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
LESS(CSS Pre Processor) introduction
rushi7567
 
Preprocessor presentation
Mario Noble
 
UNIT 3.ppt
kavi806657
 
Doing More With Less
David Engel
 
LESS : The dynamic stylesheet language
Katsunori Tanaka
 
Advanced Technology for Web Application Design
Bryce Kerley
 
CSS 開發加速指南-Sass & Compass
Lucien Lee
 
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
 
CSS Extenders
Idan Gazit
 
Advanced sass
Kianosh Pourian
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
c l
 
Ad

Recently uploaded (20)

PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
Digital Circuits, important subject in CS
contactparinay1
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Ad

From CSS to Sass in WordPress

  • 1. FROM CSS TO SASS IN WORDPRESS James Steinbach WP Summit 2014 @jdsteinbach #wpsummit . 1
  • 2. BENEFITS OF SASS •  Code organization (partials, nesting) •  Faster styling (mixins, functions) •  Scalable code (logic, variables) 2
  • 5. CONVERT A STYLESHEET TO SASS So where do we even start? 5
  • 6. THE BARE MINIMUM •  CSS is valid Sass: –  change style.css to style.scss –  edit –  compile back to style.css 6
  • 7. SETTING UP PARTIALS •  Copy each “section” of style.css to a separate .scss file in your /sass/ folder. •  Name the file after what it does with an underscore prefix. –  Example: styles relating to your navigation go to _navigation.scss •  Import that partial in your main style.scss file. –  @import 'navigation'; 7
  • 8. REFACTOR AS NECESSARY .header .logo { //styles } .header .tagline { //styles } .header .menu { //styles } .header { .logo { //styles } .tagline { //styles } .menu { //styles } } 8
  • 9. REFACTOR AS NECESSARY .menu a { -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s; } .menu a { @include transition(color 0.2s); } 9
  • 10. COMPILE YOUR SASS FOR WP Now that we broke it down, how do we put it back together? 10
  • 11. WP REQUIREMENTS •  Theme root contains style.css with WP comments •  All Sass files in a subdirectory to keep theme root clean •  Ability to compress output for deployed code •  Avoid long, complex command line code 11
  • 12. CLI COMPILE METHODS •  Sass CLI –  Compile: sass style.scss style.css –  Watch: sass --watch style.scss style.css •  Compass CLI –  Watch: compass watch 12
  • 13. GUI COMPILE METHODS •  Codekit: incident57.com/codekit •  Koala: koala-app.com •  Scout: mhs.github.io/scout-app •  Compass.app: compass.kkbox.com 13
  • 14. COMPASS WATCH •  Easiest CLI syntax: compass watch •  Config.rb file for options: –  File path (keep style.css in the right place) –  Output expanded compressed 14
  • 15. MY COMPASS CONFIG.RB •  Lives in /theme/sass/ –  style.css goes up a level to theme root css_dir = '..' –  sass files live in same /sass/ directory as config.rb sass_dir = '' –  development setting output_style = :expanded –  deployment setting output_style = :compressed 15
  • 16. WP STYLE.CSS COMMENTS •  style.scss in /theme/sass/ •  Include '!' to preserve comments in :compressed output /*! Theme Name: Sassy Theme Theme URI: http://jamessteinbach.com/ Author: James Steinbach Author URI: http://jamessteinbach.com Description: From CSS to Sass */ @import 'variables'; @import 'bourbon/bourbon'; //etc all your other imports… 16
  • 17. ORGANIZE YOUR PARTIALS Can I make all these new files easier to maintain? 17
  • 18. CASCADES STILL MATTER •  Import your broadest styles first. •  Import your most specific styles last. 18
  • 19. USE FOLDERS •  Group your .scss partials into folders: –  Base (variables, mixins, reset, typography) –  Layout (grid, header, footer) –  Components (buttons, menus, forms, widgets) –  Pages (home, landing page, portfolio) –  3rd Party (plugins, vendors, etc) 19
  • 20. FULL DISCLOSURE •  My Sass folder structure is not usually this detailed. –  /bourbon/ –  /neat/ –  /underscores/ (blank theme styles) –  All my partials (from _variables.scss to _home.scss) 20
  • 21. TRY THESE SASS TOOLS Are there any other tricks for making this workflow better? 21
  • 22. BOURBON •  Advanced Measurement/Color Functions –  golden-ratio(16px, 1); returns 25.888px –  strip-units(12px); returns 12 –  tint(#330000, 50%); returns #997f7f; –  rem(24px); default $em-base: 16px, returns 1.5rem 22
  • 23. BOURBON •  Prefixing Mixins –  @include animation(); –  @include background-image(); –  @include columns(); –  @include flexbox(); –  @include transform(); –  @include font-feature-settings(); 23
  • 24. BOURBON NEAT $grid-columns: 12; $gutter: 1em; .container { @include outer-container(); } .grid-item { @include span-columns(3); } 24
  • 25. MY MIXINS: BREAKPOINTS $breakpoints: (small: 600px, large: 920px); @mixin breakpoint($name) { @if not index(map-keys($breakpoints), $name) { @warn "Invalid breakpoint '#{$name}'."; } @else { @media (min-width: map- get($breakpoints, $name)) { @content; } } } 25
  • 26. MY MIXINS: FONT SIZES $font-sizes: (sm: 14, p: 16, bq: 20, ssh: 24, sh: 30, h: 32, hero: 48); @each $label, $size in $font-sizes { %#{$label} { font-size: $size * 1px; font-size: rem($size); } .page-title { @extend %h; } 26
  • 27. MY MIXINS: ABS. POSITION @mixin abs($t,$r,$b,$l) { position: absolute; top: $t; right: $r; bottom: $b; left: $l; } 27
  • 28. MY MIXINS: FONT-SMOOTHING @mixin font-smoothing($val) { @if $val == 'antialiased' or $val == 'subpixel-antialiased' { -webkit-font-smoothing: $val; -moz-osx-font-smoothing: $val; } @else { @warn 'Invalid value.' } } 28
  • 29. RESOURCES Where do I get more information? 29
  • 30. ADDITIONAL READING •  “Compass Compiling and WordPress Themes,” Chris Coyier - css-tricks.com/compass-compiling-and- wordpress-themes/ •  “How to Use Sass with WordPress,” Andy Leverenz - elegantthemes.com/blog/tips-tricks/how-to-use-sass- with-wordpress-a-step-by-step-guide •  “Get Your Sass in Line,” Micah Godbolt - godbolt.me/ blog/get-your-sass-in-line.html •  “Architecture for a Sass Project,” Hugo Giraudel - sitepoint.com/architecture-sass-project/ 30
  • 31. DOCUMENTATION •  Sass: sass-lang.com •  Compass: compass-style.org •  Bourbon: bourbon.io/docs •  Bourbon Neat: neat.bourbon.io/docs •  SassMeister App: sassmeister.com 31
  • 32. JAMES STEINBACH Senior Front End Developer The Idea People in Charlotte, NC @jdsteinbach | jamessteinbach.com/blog 32