Getting Sassy with WordPress Theme Development

Sass Presentation from WordCamp Manchester 2017

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