$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  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?

    View Slide

  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?

    View Slide

  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!

    View Slide

  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

    View Slide

  6. cv
    Getting Started
    Set up your Sass files

    using Partials

    View Slide

  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";
    /*

    View Slide

  8. cv
    Start the engine…
    $ sass - -watch sass/style.scss:style.css
    Sass is watching for changes. Press Ctrl-C to stop.

    View Slide

  9. cv
    Variables

    Setting Up Variables

    View Slide

  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;

    View Slide

  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;

    View Slide

  12. cv

    View Slide

  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;

    View Slide

  14. cv

    View Slide

  15. cv
    Mixins

    View Slide

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

    View Slide

  17. cv
    Extending Sass with Mixin Libraries
    http://bourbon.io/ http://compass-style.org/

    View Slide

  18. cv

    View Slide

  19. cv
    Here is some highlighted text.

    A highlighted Call to Action

    Reason to buy
    A fantastic product
    Great Value for Money
    It will change your life!!

    Get it Now!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. cv

    View Slide

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

    View Slide

  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

    View Slide

  30. cv

    View Slide

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

    View Slide

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

    View Slide