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

Sweet Sassafras: A Designer's Dive into Sass

on

  • 499 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
499
Slideshare-icon Views on SlideShare
499
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
    • 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
    • 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