Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Getting Sassy with WordPress Theme Development

Getting Sassy with WordPress Theme Development

Sass Presentation from WordCamp Manchester 2017

Sue Fernandes

October 28, 2017
Tweet

More Decks by Sue Fernandes

Other Decks in Programming

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 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"; /*
  7. cv Start the engine… $ sass - -watch sass/style.scss:style.css Sass

    is watching for changes. Press Ctrl-C to stop.
  8. 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;
  9. 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;
  10. cv

  11. 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;
  12. cv

  13. 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; }
  14. cv

  15. 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>
  16. 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%); } } }
  17. 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%); } } }
  18. 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%); } } }
  19. 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%); } } }
  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 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!!
  23. cv

  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; } } .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 .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
  26. cv