Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass to the reCSSue

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.

Job

October 26, 2017
Tweet

More Decks by Job

Other Decks in Programming

Transcript

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  4. Compilers
    • CodeKit - codekitapp.com
    • Grunt.js - gruntjs.com
    • Jetpack - jetpack.com 

    Appearance > Customise > Additional CSS

    View full-size slide

  5. Workshop Setup
    • Start with CSS

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

    View full-size slide

  6. Variables
    • Set fixed values at top
    • Reuse throughout
    • Examples:
    - Colour
    - Font
    - Any value 

    you’ll reuse

    View full-size slide

  7. Variables
    Assignment: 

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

    View full-size slide

  8. Nesting
    Selectors within selectors

    View full-size slide

  9. Nesting
    Assignment: 

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

    View full-size slide

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

    View full-size slide

  11. 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

    View full-size slide

  12. Mixins: Border radius
    Set values and browser compatibility

    View full-size slide

  13. Mixins: Transitions
    Apply arguments across browsers

    View full-size slide

  14. Mixins: Other
    Assignment: 

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

    View full-size slide

  15. Functions
    Built-in Sass functions

    View full-size slide

  16. Functions
    Assignment: 

    Apply lighten(color, percentage)

    View full-size slide

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

    View full-size slide

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

    View full-size slide