Getting Sassy with WordPress Theme Development

Getting Sassy with WordPress Theme Development

Sass Presentation from WordCamp Manchester 2017

9e3455512cf3e982e0eda1629b476124?s=128

Sue Fernandes

October 28, 2017
Tweet

Transcript

  1. cv Getting ‘Sassy’ With Your Theme Development An introduction to

    using Sass in WordPress theme development. Sue Fernandes @suefernandesweb
  2. cv A CSS PreProcessor which extends CSS3 CSS Shorthand! (Syntatically

    Awesome StyleSheets) Improves and extends your CSS code Speeds up workflow Decreases frustration Increases Productivity and Profits Why Use Sass? What Is Sass?
  3. cv Sass is an extension of CSS3 which adds nested

    rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organise and maintain. http://sass-lang.com/guide How does it do that?
  4. cv YOU HAVE TO LEARN TO WALK BEFORE YOU CAN

    RUN LEARN CSS FIRST! WORK LOCALLY LEARN CSS FIRST !!! Sass on a live server only leads to: Confusion, Frustration & Failure :( Doing it right!
  5. cv Install through the terminal or use GUI tools such

    as Codekit or Scout http://sass-lang.com/install $ gem install sass Installing Sass
  6. cv Getting Started Set up your Sass files using Partials

  7. cv Getting Started Pulling partial files into style.scss // Core

    variables and mixins @import "variables"; // Modify this for custom colors, font-sizes, etc @import "mixins"; // Modify this for custom functions and actions etc /*! Theme Name: Sass Example Theme Description: Genesis Child theme for Sass Talk Author: SueFernandes Author URI: http://www.suefernandes.co.uk Version: 1.0 Template: genesis Template Version: 2.5 License: GPL-2.0+ License URI: http://www.opensource.org/licenses/gpl-license.php */ /* 02 Base Styles ---------------------------------------------------------------------------------------------------- */ @import "01defaults"; @import "02layout-grid"; @import "03headings"; /* 03 Header ---------------------------------------------------------------------------------------------------- */ @import "04header"; /* 04 Navigation ---------------------------------------------------------------------------------------------------- */ @import "05navigation"; /* 05 Meta and Comments ---------------------------------------------------------------------------------------------------- */ @import "06meta-comments"; /*
  8. cv Start the engine… $ sass - -watch sass/style.scss:style.css Sass

    is watching for changes. Press Ctrl-C to stop.
  9. cv Variables Setting Up Variables

  10. cv // Color Scheme $color-base: #6C648B; $color-accent: #B6A19E; // Light

    and Dark $dark: #474747; $light: #FFFFFF; // Typography // Google Fonts @import url(https://fonts.googleapis.com/css?family=Playfair+Display|Muli:400,700); $textColor: #333 !default; $sansFontFamily: "Muli", "Helvetica Neue", Helvetica, Arial, sans-serif !default; $serifFontFamily: "Playfair Display", Georgia, "Times New Roman", Times, serif !default;
  11. cv background-color: $color-base; background-color: lighten($color-base, 40%); background-color: darken($color-base, 40%); background-color:

    rgba($color-base, 0.5 ); background-color: saturate($color-base, 20%); background-color: desaturate($color-base, 20%); $color-base = #6C648B font-family: $sansFontFamily; font-family: $serifFontFamily;
  12. cv

  13. cv // Color Scheme $color-base: #6BBAA7; $color-accent: #FBA100; // Light

    and Dark $dark: #474747; $light: #FFFFFF; // Typography // Google Fonts @import url(https://fonts.googleapis.com/css?family=Anton|Raleway:400,700); $textColor: #333 !default; $sansFontFamily: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif !default; $serifFontFamily: “Anton", Georgia, "Times New Roman", Times, serif !default;
  14. cv

  15. cv Mixins

  16. cv @mixin clearfix() { &:before, &:after { content: ""; display:

    table; } &:after { clear: both; } } @mixin font-size($sizeValue: 16 ) { font-size: $sizeValue + px; //fallback for old browsers font-size: (0.1 * $sizeValue) + rem; }
  17. cv Extending Sass with Mixin Libraries http://bourbon.io/ http://compass-style.org/

  18. cv

  19. cv <h2 class=“highlighted-text">Here is some highlighted text.</h2> <div class="cta"> <h4>A

    highlighted Call to Action</h4> <ul> <li>Reason to buy</li> <li>A fantastic product</li> <li>Great Value for Money</li> <li>It will change your life!!</li> </ul> <a class="button" href="#">Get it Now!</a> </div>
  20. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } extending nesting variables mixins calculations .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  21. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } extending nesting variables mixins calculations .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  22. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } extending nesting variables mixins calculations .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  23. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } extending nesting variables mixins calculations .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  24. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } extending nesting variables mixins calculations .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  25. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } extending nesting variables mixins calculations .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  26. cv body:before { white-space: pre; font-family: monospace; content: "Error: Invalid

    CSS after \" &\": expected \";\", was \":hover {\"\A on line 61 of sass/_07entrycontent.scss\A from line 94 of sass/style.scss\A \A 56: display: inline-block; \A 57: margin: 0 auto;\A 58: color: $light;\A 59: background: $color- base\A 60: \A 61: &:hover {\A 62: background: lighten($color- base, 10%);\A 63: }\A 64: }\A 65: }\A 66: "; } CSS Broken CSS!!
  27. cv

  28. cv .highlighted-text { background-color: $color-accent; padding: 24px; border: 8px solid

    darken($color-accent, 8%); text-align: center; @media only screen and (max-width: 768px) { padding: 60px; } } .cta { @include clearfix(); width: percentage( 864 / 1152 ); margin: 0 auto; @extend .highlighted-text; background: url('images/cta-background.jpg') no-repeat; h4 { color: lighten($color-accent, 50%); @include font-size(36); font-family: $sansFontFamily; } ul { li { @include font-size(28); font-weight: 700; color: rgba($light, 0.6); font-family: $serifFontFamily; } } a.button { display: inline-block; margin: 0 auto; color: $light; background: $color-base &:hover { background: lighten($color-base, 10%); } } }
  29. cv .cta { width: 75%; margin: 0 auto; background: url("images/cta-background.jpg")

    no-repeat; } .cta:before, .cta:after { content: ""; display: table; } .cta:after { clear: both; } .cta h4 { color: #fffefb; font-size: 36px; font-size: 3.6rem; font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; } .cta ul li { font-size: 28px; font-size: 2.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); font-family: "Anton", Georgia, "Times New Roman", Times, serif; } .cta a.button { display: inline-block; margin: 0 auto; color: #fff; background: #6BBAA7; } .cta a.button:hover { background: #8ecabc; } .highlighted-text, .cta { background-color: #FBA100; padding: 24px; border: 8px solid #d28700; text-align: center; } @media only screen and (max-width: 768px) { .highlighted-text, .cta { padding: 60px; } } CSS Compiled CSS
  30. cv

  31. cv http://sass-lang.com/install http://sass-lang.com/guide http://thesassway.com/beginner

  32. cv @suefernandesweb suefernandes.co.uk Sue Fernandes Questions?