Sass to the reCSSue

999ec503c62c8972cbbc00f0aa932f4f?s=47 Job
October 26, 2017

Sass to the reCSSue

by Gareth Allison & Job Thomas at WordCamp Cape Town

Sass (Syntactically Awesome Style Sheets) has been around for quite a while as a powered-up version CSS extension language. In this workshop, we’ll introduce you to some of the best Sass variables and mixins that we’ve encountered. We’ll help you to implement them to a basic website using Jetpack, WooCommerce, and the Storefront theme.

This is a workshop for intermediate users. You should have a good understanding of basic CSS.

999ec503c62c8972cbbc00f0aa932f4f?s=128

Job

October 26, 2017
Tweet

Transcript

  1. Sass to the reCSSue WordCamp Cape Town 2017 by @garethisatwit

    and @jobtex
  2. Prep • On your local site, install - WooCommerce -

    Jetpack - Storefront • For Jetpack - Add define( ‘JETPACK_DEV_DEBUG', true ); 
 to wp-config.php - Go to YOURSITE.DEV/wp-admin/admin.php?page=jetpack_modules and activate Custom CSS • Download file at: github.com/garethallison/WCCT-2017-Sass-to-the- reCSSue/blob/master/css/style.css
  3. What’s in Sass-name? • Syntactically awesome style sheets • sass-lang.com

    • Example
  4. style.scss

  5. Compilers • CodeKit - codekitapp.com • Grunt.js - gruntjs.com •

    Jetpack - jetpack.com 
 Appearance > Customise > Additional CSS
  6. Workshop Setup • Start with CSS
 File at: github.com/garethallison/WCCT-2017-Sass-to-the- reCSSue/blob/master/css/style.css

    • Convert to Sass
  7. Variables • Set fixed values at top • Reuse throughout

    • Examples: - Colour - Font - Any value 
 you’ll reuse
  8. Variables Assignment: 
 Set variables and replace in stylesheet •

    Colours • Fonts (don’t forget font @import)
  9. Nesting Selectors within selectors

  10. Nesting Assignment: 
 Try to apply as much nesting as

    possible • .storefront-primary-navigation • .entry-title & .section-title • .products • .button • .site-footer
  11. Mixins: Media queries Media queries as formula in order to

    nest
  12. Mixins: Media queries Assignment: 
 Configure 3 media queries and

    apply • 768px, 907px, and 1070px • Apply to - .site-branding - .entry-title - .cart-content - .storefront-primary-navigation - .site-header-cart
  13. Mixins: Border radius Set values and browser compatibility

  14. Mixins: Transitions Apply arguments across browsers

  15. Mixins: Other Assignment: 
 Apply mixins to as many of

    the following as possible: • Border radius • Transitions • Opacity • Box shadow
  16. Functions Built-in Sass functions

  17. Functions Assignment: 
 Apply lighten(color, percentage)

  18. Next steps • Sassify your theme • Good order: -

    Variables - Nesting - Mixins - Functions • Google for extra Sass options, e.g. @extend
  19. Resources • DRY-ing Sass mixins • Some good lists: -

    Engage Interactive - W3BITS - @justinbrazeau • Job's blog (slides) • Gareth’s GitHub repo (CSS & Sass)