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

Getting Sassy with WordPress 4.7 and Jetpack

Job
March 04, 2017

Getting Sassy with WordPress 4.7 and Jetpack

WordPress builders often will use a free or premium WordPress theme to make their website. With adding a bit of CSS, you can easily tweak the design a little bit.

With the release of WordPress 4.7, the customizer now includes support for custom CSS with a direct preview of the custom code. If you install Jetpack to your website, you will not only see a nice looking syntax, you're also able to activate a preprocessor and use Sass (syntactically awesome style sheets) from with the customizer.

In this workshop at CMS Africa 2017, I introduced Sass and together we did some exercises using the Twenty Seventeen theme, the customizer and Jetpack.

Job

March 04, 2017
Tweet

More Decks by Job

Other Decks in Technology

Transcript

  1. Getting Sassy with
    WordPress 4.7 and Jetpack
    Job Thomas
    WooCommerce Education Lead
    @jobtex | job.blog

    View full-size slide

  2. Languages
    Which languages are used 

    in WordPress on the development side?

    View full-size slide

  3. Chrome Dev Tools: Inspect
    • Go to your site
    • right-click > inspect
    • Look at elements tab

    View full-size slide

  4. Syntax: Overview
    h1 {

    color: blue;

    font-size: 12px;

    }
    selector {

    property: value; = declaration

    property: value; = declaration

    }

    View full-size slide

  5. Syntax: Selectors

    Header


    Paragraph
    describing some important thing.


    On a last note.



    • element: body, h2, p
    • class: .first
    • id: #last

    View full-size slide

  6. Resources
    • w3schools.com/css/
    • DesktopServer
    • unsplash.com

    View full-size slide

  7. Exercise
    • cms.mystagingwebsite.com
    • Change the colour of 

    “Home”
    • Change the colour and font size of 

    “Welcome to the …”

    View full-size slide

  8. Problems with CSS
    • Selectors:
    - Too specific
    - Not specific enough
    • Repetitive

    View full-size slide

  9. Insert: Sass
    • sass-lang.com
    • Some advantages:
    - Variables
    - Nesting
    - Mixins

    View full-size slide

  10. Variables
    h2 {

    color: blue;

    }


    .entry-content p {

    color: blue;

    }
    $main: blue;


    h2 {

    color: $main;

    }


    .entry-content p {

    color: $main;

    }

    View full-size slide

  11. Variable: Format
    $namevariable: value;

    View full-size slide

  12. Some variable to use
    • Fonts

    $font-main: ‘Raleway’, sans-serif;

    (of course, you first need to @import that font)
    • Colours

    $grey: #eee;
    • Sizes

    $wide: 1024px;


    View full-size slide

  13. Nesting
    .entry-content {

    background: red;

    }


    .entry-content h2 {

    padding: 2em;

    }


    .entry-content p {

    color: $main;

    }
    .entry-content {

    background: red;

    h2 {

    padding: 2em;

    }

    p {

    color: $main;

    }

    }

    View full-size slide

  14. Nesting: Format
    selector_level_1 {

    declaration; 

    // only applies to L1

    selector_level_2 {

    declaration; 

    // only applies to L2 within L1

    }

    }

    View full-size slide

  15. Mixins
    img {

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -ms-border-radius: 10px;

    border-radius: 10px;

    }


    .box {

    -webkit-border-radius: 5%;

    -moz-border-radius: 5%;

    -ms-border-radius: 5%;

    border-radius: 5%;

    }
    @mixin border-radius($radius) {

    -webkit-border-radius: $radius;

    -moz-border-radius: $radius;

    -ms-border-radius: $radius;

    border-radius: $radius;

    }


    img {

    @include border-radius(10px);

    }


    .box {

    @include border-radius(5%);

    }

    View full-size slide

  16. Mixins: Format
    @mixin namefunction($namevariable) {

    // ($namevariable) is optional

    declaration;

    }


    .selector {

    @include namefunction(arguments);

    // arguments are “values”

    // for $namevariable “properties”

    }

    View full-size slide

  17. Some mixins to use
    Media queries
    @mixin wide {

    @media (min-width: 1024px) {

    @content;

    }

    }


    .entry-content {

    p {

    margin-left: 10px;

    @include wide {

    margin-left: 20px;

    }

    }

    }
    Transitions
    @mixin transition($args...) {

    -webkit-transition: $args;

    -moz-transition: $args;

    -ms-transition: $args;

    -o-transition: $args;

    transition: $args

    }


    .button {

    background: white;

    @include transition(background 1s);

    &:hover {

    background: black;

    }

    }

    View full-size slide

  18. Some mixins to use
    Variable clusters
    @mixin large-text {

    font: {

    family: Arial;

    size: 20px;

    weight: bold;

    }

    color: $main;

    }


    p {

    @include large-text;

    }
    But also for:
    • Box shadows
    • Content blocks
    • …

    View full-size slide

  19. Functions
    p {

    color: rgba(black, 0.8);

    }
    $main: black;


    p {

    color: lighten($main, 80%);

    }

    View full-size slide

  20. Sources
    • developerdrive.com/2014/11/15-essential-
    sass-mixins/
    • engageinteractive.co.uk/blog/top-10-scss-
    mixins
    • hackingui.com/front-end/10-best-scss-utilities/

    View full-size slide

  21. Sass processing: Jetpack
    • Install and activate Jetpack
    • Activate Custom CSS

    Jetpack > Settings > Appearance > Custom CSS
    • Open Appearance > Customise > Edit CSS
    • Under Preprocessor, select Sass (SCSS Syntax)

    View full-size slide

  22. Exercise
    • Set colour variables
    • Set font variables
    On the shop page
    • Set rounded edges for all product images
    • Change the font of the product titles
    • Make the purchase buttons look different
    • Use transitions on the buttons 

    (e.g. let a:hover colour change take 1 sec)

    View full-size slide

  23. Inspect the code
    cms.mystagingwebsite.com/shop

    View full-size slide

  24. Review
    • Go over code together
    • Next exercises:
    - Try another Sass line
    - Explore Grunt.js or another compiler

    View full-size slide