using sass in your wordpress projects
DESCRIPTION
A presentation given at WordCamp Kansas City 2014 to help developers start using Sass in their WordPress themes and plugins.TRANSCRIPT
Using Sass in Your WordPress Projects
Kansas City WordCamp - July 12, 2014 !
Jeremy Green WordPress Developer at Endo Creative Organizer of the Fort Collins WordPress Meetup !@greenhornet79 !endocreative.com !
CSS Today !
Bert Bos, CSS co-inventor: !
“CSS stops short of even more powerful features that programmers use in their
programming languages: macros, variables, symbolic constants, conditionals,
expressions over variables, etc. That is because these things give power-users a lot
of rope, but less experienced users will unwittingly hang themselves.”
Vanilla CSS
Putting the Power into CSS
CSS Preprocessors
Sass Syntactically Awesome Style Sheets
A CSS preprocessor that lets you write CSS:
!
• faster
• more efficient
• more maintainable
CSS with superpowers
A few of my favorite things
Nesting
CSS SCSS
Variables
!
• similar to php variables • turn repetitive values into variables • define it once, use it throughout your projects
Partials
!
• prepend partials with an underscore • split CSS into maintainable blocks of code • only one HTTP request!
! Folders!
Extends
!
• reuse a snippet of CSS • does not accept any parameters • same styles as another class, except for a few rules
Silent Placeholder
Mixins
!
• accepts parameters like a function • use for tedious tasks like vendor prefixes • reusable block of CSS, but with parameters
Inline Media Queries
!
• create a media query mix-in • set breakpoints for your design • use logic and return content in a mixin
!
• use @include to call the mixin • stack media queries for different breakpoints • any rules inside media query will be added to CSS
SCSS Compiled
Small Investment
Big Reward
Command Line
gem install sass
Watch the files
sass --watch global.scss:global.css
Applications
The App Way
Open app, make changes, save file
Your First Project
Watch your files
Configure options
Compressed = Fastest
Let’s Precompile
Don’t touch that file
Live is .scss land now
One bite at a time !
!
you don’t have to use everything at once
WordPress Integration !
!
Update functions.php !
! Use style.css (old way)
Use css/global.css (new way)
Stripped down style.css !
!
!
• comments for theme details • alert future developers about the theme using Sass
Use in a plugin !
!
!
• good even for small projects • use wp_enqueue_style to enqueue css file • split front and back end styles
Gravity Forms !
!
Tips for Integration !
!!
• make sure to update css and scss files on server • give option to edit css if needed • create a partial for overriding plugin styles • app is nice when you work on 10 projects a day
Additional Tools !
!
!
• CSS3 mixins • helper functions (colors, math, and much more) • generate sprites dynamically
Susy !
!
!
• Sass grid system (or not) • creates layouts using mixins • calculate column and gutter widths
Breakpoint !
!
!
• media queries with Sass • includes lots of helpful tools
Final Thoughts !
!
!
• Sass won’t make you write better CSS • Sass won’t build an awesome WP theme • Don’t be afraid to try something new
!
Resources !
!
!
• sass-lang.com • sassmeister.com • Compass • Susy • Breakpoint • Sass for Web Designers • CSS Tricks Screencast
Thank You!
@greenhornet79