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=鈥渇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 鈥 w3schools.com/css/ 鈥 DesktopServer 鈥 unsplash.com

  8. Exercise 鈥 cms.mystagingwebsite.com 鈥 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 鈥 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: 鈥楻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 鈥 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 di铿erent 鈥 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