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

Languages Which languages are used 
 in WordPress on the development side?

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

HTML CSS

Syntax: Overview h1 {
 color: blue;
 font-size: 12px;
 } selector {
 property: value; = declaration
 property: value; = declaration
 }

Syntax: Selectors 


Header





Paragraph describing some important thing.





On a last note.



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

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

Exercise • cms.mystagingwebsite.com • Change the colour of 
 “Home” • Change the colour and font size of 
 “Welcome to the …”

No content

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

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

Variables h2 {
 color: blue;
 }
 
 .entry-content p {
 color: blue;
 } $main: blue;
 
 h2 {
 color: $main;
 }
 
 .entry-content p {
 color: $main;
 }

Variable: Format $namevariable: value;

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;


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;
 }
 }

Nesting: Format selector_level_1 {
 declaration; 
 // only applies to L1
 selector_level_2 {
 declaration; 
 // only applies to L2 within L1
 }
 }

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%);
 }

Mixins: Format @mixin namefunction($namevariable) {
 // ($namevariable) is optional
 declaration;
 }
 
 .selector {
 @include namefunction(arguments);
 // arguments are “values”
 // for $namevariable “properties”
 }

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;
 }
 }

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 • …

Functions p {
 color: rgba(black, 0.8);
 } $main: black;
 
 p {
 color: lighten($main, 80%);
 }

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/

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)

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)

Inspect the code cms.mystagingwebsite.com/shop

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