• Save
Sweet Sassafras: A Designer's Dive into Sass
Upcoming SlideShare
Loading in...5
×
 

Sweet Sassafras: A Designer's Dive into Sass

on

  • 561 views

An introduction to Sass for designers working in the WordPress environment

An introduction to Sass for designers working in the WordPress environment

Statistics

Views

Total Views
561
Views on SlideShare
561
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

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

Sweet Sassafras: A Designer's Dive into Sass Sweet Sassafras: A Designer's Dive into Sass Presentation Transcript

  • Sweet Sassafras: A Designer's Dive into Sass Liam Dempsey @liamdempsey Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • C’est moi! •  •  •  •  •  Designer Designer Designer who codes Not a developer Organize the Philly ‘burbs WordPress Meetup (#burbswp) •  Run an international consultancy Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • What We’ll Cover •  The WHAT and WHY of Sass •  Tweak local development setup for Sass (on a Mac) •  Basic elements of Sass Philadelphia WordPress Meetup: February 2014 @liamdempsey View slide
  • My Goals for Tonight •  Remove the fear •  Put you on the right road •  Provide resources for moving forward •  Get you excited to get started Philadelphia WordPress Meetup: February 2014 @liamdempsey View slide
  • Hat Tips Ngaire Ackerley: @ngaireackerley Tracy Levesque: @liljimmi Jeremy Pry: @jeremypry Brad, Doug and Reed: @williamsba, @zamoose and @tangofoxtrot Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • What is Sass? •  Kind of like CSS for CSS •  Very powerful: like CSS on the sort of steroids that would frighten even Lance Armstrong Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Why Sass? •  Improve workflows – make it easier on yourself •  Improve efficiencies – build websites faster Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • For a Designer: The Tools •  •  •  •  Working on a Mac Code editor: Sublime Text 2 Codekit to compile the Sass A clean, local WordPress install using MAMP Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • READY?
  • Configure Sublime Text 2 Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Configure Sublime Text 2 Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Configure Sublime Text 2 STEP 1: https://sublime.wbond.net/ installation STEP 2: https://github.com/nathos/ sass-textmate-bundle Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Organizing Your Sass Files •  Partials – the different sub-files that are compiled into a single CSS file •  @import – the code used to deter the order in which the partials are compiled in the output CSS Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • The Partials Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • The @import Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • The @import Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • The Partials: _footer.scss Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Grab a Normalize.scss •  Preserves useful defaults •  Normalizes styles for a wide range of elements. •  Corrects bugs + common browser inconsistencies •  Code online at: https://github.com/ kristerkari/normalize.scss Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Let’s Get Sassing!
  • Variables Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Nesting Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Extend: with @mixin Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Extend: @extend Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Operators Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Mixins + Placeholders •  A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. •  Functions that drop CSS content instead of returning a value. Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Mixins + Placeholders Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Mixins + Placeholders •  A placeholder is like a @mixin except that it does not allow for variables •  Placeholder selectors look like class and id selectors, except the # or . is replaced by %. Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Questions?
  • Sass Resources http://sass-lang.com/ http://susy.oddbird.net/ https://speakerdeck.com/danajanssen/using-sass-to-code-betterwordpress-templates http://talks.guyroutledge.co.uk/sass-compass/slides/#/1 http://sonspring.com/journal/sass-for-designers http://www.developerdrive.com/2012/07/introduction-to-sass/ http://www.creativebloq.com/web-design/create-flexible-grids-usingsass-9134524 http://lukewhitehouse.co.uk/compiling-sass-for-wordpress http://peteschuster.com/2013/02/beyond-oocss-with-sass/ http://css-tricks.com/compass-compiling-and-wordpress-themes/ http://thesassway.com/beginner http://www.thetracyl.com/start-using-sass/ Philadelphia WordPress Meetup: February 2014 @liamdempsey
  • Thanks! Work: lbdesign.tv Blog: liamdempsey.com Quirky: chickenmonkeydog.com @liamdempsey liam@lbdesign.tv Philadelphia WordPress Meetup: February 2014 @liamdempsey