Using Sass in Your WordPress Projects

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

Installing Sass http://sass-lang.com/install

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