Save 37% off PRO during our Black Friday Sale! »

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.

999ec503c62c8972cbbc00f0aa932f4f?s=128

Job

March 04, 2017
Tweet

Transcript

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

    Education Lead @jobtex | job.blog
  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
  4. HTML CSS

  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=“first”>Paragraph describing some important

    thing.
 </p>
 <p id=“last”>On a last note.
 </p>
 </body> • element: body, h2, p • class: .first • id: #last
  7. Resources • w3schools.com/css/ • DesktopServer • unsplash.com

  8. Exercise • cms.mystagingwebsite.com • Change the colour of 
 “Home”

    • Change the colour and font size of 
 “Welcome to the …”
  9. None
  10. Problems with CSS • Selectors: - Too specific - Not

    specific enough • Repetitive
  11. Insert: Sass • sass-lang.com • 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: ‘Raleway’, sans-serif;
 (of

    course, you first 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 “values”
 // for $namevariable “properties”
 }
  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 • developerdrive.com/2014/11/15-essential- sass-mixins/ • engageinteractive.co.uk/blog/top-10-scss- mixins • hackingui.com/front-end/10-best-scss-utilities/

  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 different • Use transitions on the buttons 
 (e.g. let a:hover colour change take 1 sec)
  25. Inspect the code cms.mystagingwebsite.com/shop

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

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