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.

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)