Sass to the reCSSue - Speaker Deck

Sass to the reCSSue

by Job

Slide 1

Slide 1 text

Sass to the reCSSue WordCamp Cape Town 2017 by @garethisatwit and @jobtex

Slide 2

Slide 2 text

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 ﬁle at: github.com/garethallison/WCCT-2017-Sass-to-the- reCSSue/blob/master/css/style.css

Slide 3

Slide 3 text

What’s in Sass-name? • Syntactically awesome style sheets • sass-lang.com • Example

Slide 4

Slide 4 text

style.scss

Slide 5

Slide 5 text

Compilers • CodeKit - codekitapp.com • Grunt.js - gruntjs.com • Jetpack - jetpack.com   Appearance > Customise > Additional CSS

Slide 6

Slide 6 text

Workshop Setup • Start with CSS  File at: github.com/garethallison/WCCT-2017-Sass-to-the- reCSSue/blob/master/css/style.css • Convert to Sass

Slide 7

Slide 7 text

Variables • Set ﬁxed values at top • Reuse throughout • Examples: - Colour - Font - Any value   you’ll reuse

Slide 8

Slide 8 text

Variables Assignment:   Set variables and replace in stylesheet • Colours • Fonts (don’t forget font @import)

Slide 9

Slide 9 text

Nesting Selectors within selectors

Slide 10

Slide 10 text

Nesting Assignment:   Try to apply as much nesting as possible • .storefront-primary-navigation • .entry-title & .section-title • .products • .button • .site-footer

Slide 11

Slide 11 text

Mixins: Media queries Media queries as formula in order to nest

Slide 12

Slide 12 text

Mixins: Media queries Assignment:   Conﬁgure 3 media queries and apply • 768px, 907px, and 1070px • Apply to - .site-branding - .entry-title - .cart-content - .storefront-primary-navigation - .site-header-cart

Slide 13

Slide 13 text

Mixins: Border radius Set values and browser compatibility

Slide 14

Slide 14 text

Mixins: Transitions Apply arguments across browsers

Slide 15

Slide 15 text

Mixins: Other Assignment:   Apply mixins to as many of the following as possible: • Border radius • Transitions • Opacity • Box shadow

Slide 16

Slide 16 text

Functions Built-in Sass functions

Slide 17

Slide 17 text

Functions Assignment:   Apply lighten(color, percentage)

Slide 18

Slide 18 text

Next steps • Sassify your theme • Good order: - Variables - Nesting - Mixins - Functions • Google for extra Sass options, e.g. @extend

Slide 19

Slide 19 text

Resources • DRY-ing Sass mixins • Some good lists: - Engage Interactive - W3BITS - @justinbrazeau • Job's blog (slides) • Gareth’s GitHub repo (CSS & Sass)