Your SlideShare is downloading. ×
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
SASS In The Real World
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SASS In The Real World

214

Published on

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

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
214
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SASS IN THE REAL WORLD Tom Crinson - Front End Suffolk - April 30th
  • 2. Hello.
  • 3. I’m a Developer.
  • 4. CSS is MORE than just TEXT
  • 5. Structured.
  • 6. Ordered.
  • 7. DRY. (don’t repeat yourself)
  • 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. Intended Target.
  • 10. We have a winner.
  • 11. Are you ready?
  • 12. The Stylesheet.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Warning! • Be careful how deep you nest; it can become very confusing!
  • 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. 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. 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. Solution 3: Why? • Groups together frequently copied bits of code for ease of reuse • Eliminates copy & paste errors • Parameterized functions are awesome
  • 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. 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. 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. 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. Further Awesomeness. • Sass Docs - http://sass-lang.com/ • Compass - http://compass-style.org its like Sass on Steroids
  • 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. Goodbye.
  • 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/

×