Getting Sassy with WordPress 4.7 and Jetpack

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

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

Problems with CSS • Selectors: - Too speciﬁc - Not
speciﬁc 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 ﬁrst 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 diﬀerent • 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

Getting Sassy with WordPress 4.7 and Jetpack

Getting Sassy with WordPress 4.7 and Jetpack

Job

More Decks by Job

Other Decks in Technology

Featured

Transcript