Getting Sassy with WordPress 4.7 and Jetpack

999ec503c62c8972cbbc00f0aa932f4f?s=47 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.



March 04, 2017


  1. Getting Sassy with WordPress 4.7 and Jetpack Job Thomas WooCommerce

    Education Lead @jobtex |
  2. Languages Which languages are used 鈥 in WordPress on the

    development side?
  3. Chrome Dev Tools: Inspect 鈥 Go to your site 鈥

    right-click > inspect 鈥 Look at elements tab

  5. Syntax: Overview h1 {鈥 color: blue;鈥 font-size: 12px;鈥 } selector

    {鈥 property: value; = declaration鈥 property: value; = declaration鈥 }
  6. Syntax: Selectors <body>鈥 <h2>Header鈥 </h2>鈥 <p class=鈥渇irst鈥>Paragraph describing some important

    thing.鈥 </p>鈥 <p id=鈥渓ast鈥>On a last note.鈥 </p>鈥 </body> 鈥 element: body, h2, p 鈥 class: .first 鈥 id: #last
  7. Resources 鈥 鈥 DesktopServer 鈥

  8. Exercise 鈥 鈥 Change the colour of 鈥 鈥淗ome鈥

    鈥 Change the colour and font size of 鈥 鈥淲elcome to the 鈥︹
  9. None
  10. Problems with CSS 鈥 Selectors: - Too speci铿乧 - Not

    speci铿乧 enough 鈥 Repetitive
  11. Insert: Sass 鈥 鈥 Some advantages: - Variables -

    Nesting - Mixins
  12. Variables h2 {鈥 color: blue;鈥 }鈥 鈥 .entry-content p {鈥

    color: blue;鈥 } $main: blue;鈥 鈥 h2 {鈥 color: $main;鈥 }鈥 鈥 .entry-content p {鈥 color: $main;鈥 }
  13. Variable: Format $namevariable: value;

  14. Some variable to use 鈥 Fonts鈥 $font-main: 鈥楻aleway鈥, sans-serif;鈥 (of

    course, you 铿乺st need to @import that font) 鈥 Colours鈥 $grey: #eee; 鈥 Sizes鈥 $wide: 1024px;鈥
  15. 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;鈥 }鈥 }
  16. Nesting: Format selector_level_1 {鈥 declaration; 鈥 // only applies to

    L1鈥 selector_level_2 {鈥 declaration; 鈥 // only applies to L2 within L1鈥 }鈥 }
  17. 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%);鈥 }
  18. Mixins: Format @mixin namefunction($namevariable) {鈥 // ($namevariable) is optional鈥 declaration;鈥

    }鈥 鈥 .selector {鈥 @include namefunction(arguments);鈥 // arguments are 鈥渧alues鈥濃 // for $namevariable 鈥減roperties鈥濃 }
  19. 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;鈥 }鈥 }
  20. 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 鈥 鈥
  21. Functions p {鈥 color: rgba(black, 0.8);鈥 } $main: black;鈥 鈥

    p {鈥 color: lighten($main, 80%);鈥 }
  22. Sources 鈥 sass-mixins/ 鈥 mixins 鈥

  23. 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)
  24. 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 di铿erent 鈥 Use transitions on the buttons 鈥 (e.g. let a:hover colour change take 1 sec)
  25. Inspect the code

  26. Review 鈥 Go over code together 鈥 Next exercises: -

    Try another Sass line - Explore Grunt.js or another compiler