SASS In The Real World

592 views

Published on

Tom Crinson gave fesuffolk this rousing and entertaining introduction to SASS in 2012. A great introduction to CSS preprocessors.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
592
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SASS In The Real World

  1. 1. SASS IN THE REAL WORLD Tom Crinson - Front End Suffolk - April 30th
  2. 2. Hello.
  3. 3. I’m a Developer.
  4. 4. CSS is MORE than just TEXT
  5. 5. Structured.
  6. 6. Ordered.
  7. 7. DRY. (don’t repeat yourself)
  8. 8. SASS. (syntactically awesome stylesheets) • • • • A meta language on top of CSS Aims to describe the structure of the document cleanly and structurally Simpler and more elegant syntax Adds very handy features for creating more manageable stylesheets
  9. 9. Intended Target.
  10. 10. We have a winner.
  11. 11. Are you ready?
  12. 12. The Stylesheet.
  13. 13. Issue 1: Colour Scheme. .style4 { color: #FFFFFF; font-weight: bold; font-size: x-small; } .style5 { border-color: #FF00FF; border-width: 1px; background-color: #FF0000; } .style6 { border: 1px solid #FFFFFF; } .style7 { color: #000000; } .style8 { color: #000000; font-weight: bold; } .style13 { font-family: "Arial Black"; color: #666666; } .style54 { background-color: #FFFF00; } Everywhere!
  14. 14. Solution 1: Variables. $colour_background: #FFFFFF; $colour_border: #FF00FF; $colour_bordered_background: #FF0000; $colour_first_letter_highlight: #000; $colour_table_border: #000; $colour_text_highlight: #FFFF00; $colour_application: #00FF00; $colour_symposium: #0000FF; .style5 { border-color: $colour_border; border-width: 1px; background-color: $colour_bordered_background; } .style6 { border: 1px solid $colour_background; } .style7 { color: $colour_first_letter_highlight; }
  15. 15. Solution 1: Why? • • • • Keeps colour information in one place Gives the colours meaningful names not necessarily based on colour Easy to change Reduces duplication
  16. 16. Extra Extra! (functions) $colour_background: #FFFFFF; $colour_border: darken($colour_background, 10%); $colour_bordered_background: #FF0000; $colour_first_letter_highlight: #000; $colour_table_border: complement($colour_background);
  17. 17. Issue 2: Nesting Duplication. .style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small; } .style194 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; font-size: small; } .style59 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; } .style71 { font-size: small; } .style66 { font-family: Calibri; font-weight: bold; } <p class="style196"> 2012 Annual Meeting <p class="style59"> <font size="1" class="style71"> <span style="color: navy" class="style66"> April 14, 2012 </span> </font> </p> <p class="style194"> Ashland University </p> </p>
  18. 18. Solution 2: Proper CSS. .style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small; } .style194 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; font-size: small; } .style59 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; } .style71 { font-size: small; } .style66 { font-family: Calibri; font-weight: bold; } .style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small; } .style196 .style59 { font-weight: bold; font-family: Tahoma; } .style59 .style71 .style66 { font-family: Calibri; } .style196 .style194 { font-weight: bold; font-family: Tahoma; }
  19. 19. Solution 2: Nested Rules. .style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small; } .style194 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; font-size: small; } .style59 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; } .style71 { font-size: small; } .style66 { font-family: Calibri; font-weight: bold; } .style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small; .style59 { font-weight: bold; font-family: Tahoma; .style66 { font-family: Calibri; } } .style194 { font-weight: bold; font-family: Tahoma; } }
  20. 20. Solution 2: Why? • Eliminates duplication - fewer chances for bugs to sneak in • Shorter - easier to read • It’s a pain to have to type out long selectors
  21. 21. Extra Extra! (parent references) #complicated_selector p > a{ border:1px solid red; } #complicated_selector p > a:hover { border:1px solid blue; } #complicated_selector p > a:visited { border:1px solid green; } #complicated_selector p > a{ border:1px solid red; &:hover { border:1px solid blue; } &:visited { border:1px solid green; } }
  22. 22. Warning! • Be careful how deep you nest; it can become very confusing!
  23. 23. Issue 3:Duplication. .style3 { font-family: "Arial Black"; font-size: x-small; margin-top: 0; margin-bottom: 0; } .style4 { color: $colour_background; font-weight: bold; font-size: x-small; } .style10 { font-family: Verdana; font-size: x-small; margin-top: 0; margin-bottom: 0; }
  24. 24. Solution 3: Mixins . @mixin font-style($family: Arial, $size: x-small, $weight: normal){ font-family: $family; font-size: $size; font-weight: $weight; } .style3 { @include font-style("Arial Black", x-small); margin-top: 0; margin-bottom: 0; } .style4 { color: $colour_background; @include font-style("Arial", x-small, bold); } .style10 { @include font-style("Verdana", x-small); margin-top: 0; margin-bottom: 0; }
  25. 25. A Better Example. (Browser Prefixes) @mixin rounded($radius: 10px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } .rounded_box{ @include rounded; }
  26. 26. Solution 3: Why? • Groups together frequently copied bits of code for ease of reuse • Eliminates copy & paste errors • Parameterized functions are awesome
  27. 27. Issue 4:Mixing Concerns. style.css /* =========== Brochure Styles =========== */ .style6 { border: 1px solid $colour_background; } .style7 { color: $colour_first_letter_highlight; } .style8 { color: $colour_first_letter_highlight; font-weight: bold; } .style10 { @include font-style("Verdana", x-small); margin-top: 0; margin-bottom: 0; } .style11 { font-family: Verdana; } .style12 { font-size: x-small; } /* ============ Product Pages ============ */ .style13 { font-family: "Arial Black"; color: #666666; } .style14 { font-family: Verdana; margin-top: 0; margin-bottom: 0; } .style16 { @include font-style("Arial", x-small); color: $colour_first_letter_highlight; margin-top: 0; margin-bottom: 0; }
  28. 28. Solution 4: Multiple Links. <link <link <link <link href="/stylesheets/products.css" media="screen" rel="stylesheet" type="text/css" /> href="/stylesheets/home.css" media="screen" rel="stylesheet" type="text/css" /> href="/stylesheets/brochure.css" media="screen" rel="stylesheet" type="text/css" /> href="/stylesheets/about.css" media="screen" rel="stylesheet" type="text/css" /> Noooo!!!
  29. 29. Solution 4: @Import. @import "home"; @import "about"; @import "brochure"; @import "products"; @include home; @include about; @include brochure; @include products; home.scss about.scss brochure.scss products.scss
  30. 30. Solution 4: Why? • • • Breaks stylesheets into more logical sections - forcing you to think about where each rule belongs Keeps common rules together No overhead in the browser
  31. 31. Further Awesomeness. • Sass Docs - http://sass-lang.com/ • Compass - http://compass-style.org its like Sass on Steroids
  32. 32. Final Stylesheet. $colour_background: #FFFFFF; $colour_border: #FF00FF; $colour_bordered_background: #FF0000; $colour_first_letter_highlight: #000; $colour_table_border: #000; $colour_text_highlight: #FFFF00; $colour_application: #00FF00; $colour_symposium: #0000FF; @import @import @import @import @include @include @include @include "home"; "about"; "brochure"; "products"; home; about; brochure; products;
  33. 33. Goodbye.
  34. 34. Image Credits. • http://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html • http://www.flickr.com/photos/23679420@N00/4573193013/ • http://www.flickr.com/photos/mr_t_in_dc/4800819674/sizes/m/in/photostream/

×