Using Sass in Your WordPress Projects
Upcoming SlideShare
Loading in...5
×
 

Using Sass in Your WordPress Projects

on

  • 319 views

A presentation given at WordCamp Kansas City 2014 to help developers start using Sass in their WordPress themes and plugins.

A presentation given at WordCamp Kansas City 2014 to help developers start using Sass in their WordPress themes and plugins.

Statistics

Views

Total Views
319
Views on SlideShare
311
Embed Views
8

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 8

https://twitter.com 7
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using Sass in Your WordPress Projects Using Sass in Your WordPress Projects Presentation 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
  • 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