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