The Ever-Expanding Interwebz   or “why you need to try guacamole”
The guacamole mystery
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff.
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff. •   The point ...
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff. •   The point ...
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff. •   The point ...
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff. •   The point ...
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff. •   The point ...
The guacamole mystery •   It wasn’t until I actually tried guacamole that I realized I     loved the stuff. •   The point ...
What is Sass?
What is Sass?It’s just plain ol’ CSS
On ‘ROIDS!
Seriously though. Sass...
Seriously though. Sass... •   Is an extension of CSS to utilize the DRY principle. (Don’t     repeat yourself)
Seriously though. Sass... •   Is an extension of CSS to utilize the DRY principle. (Don’t     repeat yourself)     •   Rep...
Seriously though. Sass... •   Is an extension of CSS to utilize the DRY principle. (Don’t     repeat yourself)     •   Rep...
Seriously though. Sass... •   Is an extension of CSS to utilize the DRY principle. (Don’t     repeat yourself)     •   Rep...
Okay, cool. What’s different?
Okay, cool. What’s different? •   You don’t need to change anything you know about CSS.     You can use the same syntax an...
Okay, cool. What’s different? •   You don’t need to change anything you know about CSS.     You can use the same syntax an...
Okay, cool. What’s different? •   You don’t need to change anything you know about CSS.     You can use the same syntax an...
Okay, cool. What’s different? •   You don’t need to change anything you know about CSS.     You can use the same syntax an...
Variables
Variables            Change it once and for all.$mainColor: #FF6600;       h1 {                           color: #FF6600;h...
Variables            Change it once and for all.$mainColor: #FFCC00;       h1 {                           color: #FFCC00;h...
Variables
Variables            Mathematics, good sir!h1 {                    h1 {margin: (16px / 2);     margin: 8px;width: (200px *...
Variables
Variables        Combine you crazy developer, you!$wrapper: 960px;          h1 {                          margin: 8px;h1 {...
Nesting
Nesting          #stop .doing .this #stuff > .okay?.sidebar {                  .sidebar {width: 500px;               width...
Nesting
Nesting             Don’t go overboard, though.   Your styles should NOT be location dependent.
Nesting             Don’t go overboard, though.   Your styles should NOT be location dependent.           Use wisely and w...
Mixins
Mixins               Recycle, reduce, and argue?@mixin rounded($radius) {      .box {-moz-border-radius: $radius;   -moz-b...
Mixins         Arguments are great to keep your CSS              from repeating yourself.
Selector Inheritance
Selector Inheritance     Inherit other properties without duplication.message {                  .message, .error {border-...
Colors
Colors            The prism meets the english teacherh1 {                                h1 {background: lighten(#CC0, 25%...
Colors
Colors         Many, many more like:
Colors         Many, many more like:                  hue
Colors         Many, many more like:                  hue                 invert
Colors         Many, many more like:                  hue                 invert              complement
Colors         Many, many more like:                  hue                 invert              complement               gra...
Colors         Many, many more like:                  hue                 invert              complement               gra...
Colors         Many, many more like:                  hue                 invert              complement               gra...
Colors         Many, many more like:                  hue                 invert              complement               gra...
Other Sass-y Things (Couldn’t help myself)
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled     •   // This won’t show up.
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled     •   // This won’t show up.     •   ...
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled     •   // This won’t show up.     •   ...
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled     •   // This won’t show up.     •   ...
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled     •   // This won’t show up.     •   ...
Other Sass-y Things (Couldn’t help myself) •   Sass commenting that isn’t compiled     •   // This won’t show up.     •   ...
Great! How do we use this thing?
Great! How do we use this thing? •   Your Sass sheets must be “watched” so they can be compiled     so you can do this two...
Great! How do we use this thing? •   Your Sass sheets must be “watched” so they can be compiled     so you can do this two...
Great! How do we use this thing? •   Your Sass sheets must be “watched” so they can be compiled     so you can do this two...
Great! How do we use this thing? •   Your Sass sheets must be “watched” so they can be compiled     so you can do this two...
Great! How do we use this thing? •   Your Sass sheets must be “watched” so they can be compiled     so you can do this two...
When can we start using this?
When can we start using this?               Today, silly!
When can we start using this?               Today, silly!          It just takes communication.
What is Compass?
What is Compass?An open-source CSS authoring framework!
What is Compass?An open-source CSS authoring framework!        (Sass with more features)
Features of Compass
Features of Compass •   Sass targets CSS while Compass targets CSS/HTML     workflow.
Features of Compass •   Sass targets CSS while Compass targets CSS/HTML     workflow. •   Compass makes repetitive bits of ...
Features of Compass •   Sass targets CSS while Compass targets CSS/HTML     workflow. •   Compass makes repetitive bits of ...
Quiz Time
Quiz TimeHow many browser prefixes are there to create a linear background gradient?
4567
4567
Using CSS3
Using CSS3background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bo...
Using Compass
Using Compass@import "compass";.box {@include background(linear-gradient(#FFF, #000));}
background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color...
background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color...
Border Radius with CSS3
Border Radius with CSS3      -moz-border-radius: 10px;      -webkit-border-radius: 10px;      -o-border-radius: 10px;     ...
Using Compass
Using Compass @import "compass"; .box { @include border-radius(10px); }
-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: ...
-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: ...
Other Compass Additions
Other Compass Additions •   @import “compass/reset” for Eric Meyer’s Reset
Other Compass Additions •   @import “compass/reset” for Eric Meyer’s Reset •   Can take multiple images, combine them into...
Other Compass Additions •   @import “compass/reset” for Eric Meyer’s Reset •   Can take multiple images, combine them into...
We meet again, avocado
We meet again, avocado •   Technology is changing rapidly
We meet again, avocado •   Technology is changing rapidly •   We don’t have to use every new thing that hits the scenes,  ...
We meet again, avocado •   Technology is changing rapidly •   We don’t have to use every new thing that hits the scenes,  ...
We meet again, avocado •   Technology is changing rapidly •   We don’t have to use every new thing that hits the scenes,  ...
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
Upcoming SlideShare
Loading in …5
×

BILL Hour: Try something new! (like Sass or Compass)

784 views
713 views

Published on

From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.

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

  • Be the first to like this

No Downloads
Views
Total views
784
On SlideShare
0
From Embeds
0
Number of Embeds
203
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • BILL Hour: Try something new! (like Sass or Compass)

    1. 1. The Ever-Expanding Interwebz or “why you need to try guacamole”
    2. 2. The guacamole mystery
    3. 3. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff.
    4. 4. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day.
    5. 5. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital.
    6. 6. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve
    7. 7. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time
    8. 8. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time • Worst case scenario: method doesn’t work and we move on to something else
    9. 9. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time • Worst case scenario: method doesn’t work and we move on to something else • It’s just plain fun!
    10. 10. What is Sass?
    11. 11. What is Sass?It’s just plain ol’ CSS
    12. 12. On ‘ROIDS!
    13. 13. Seriously though. Sass...
    14. 14. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself)
    15. 15. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad.
    16. 16. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad. • Is compiled on-the-fly through the command line or through a GUI application.
    17. 17. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad. • Is compiled on-the-fly through the command line or through a GUI application. • Most importantly, has room for growth and allows us to make better websites much faster.
    18. 18. Okay, cool. What’s different?
    19. 19. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way.
    20. 20. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code.
    21. 21. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code. • The compiler has numerous configuration settings to make your CSS hotter than flapjacks.
    22. 22. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code. • The compiler has numerous configuration settings to make your CSS hotter than flapjacks. • New features like variables, nestings, mixins, selector inheritance, and color modification.
    23. 23. Variables
    24. 24. Variables Change it once and for all.$mainColor: #FF6600; h1 { color: #FF6600;h1 { }color: $mainColor;}
    25. 25. Variables Change it once and for all.$mainColor: #FFCC00; h1 { color: #FFCC00;h1 { }color: $mainColor;}
    26. 26. Variables
    27. 27. Variables Mathematics, good sir!h1 { h1 {margin: (16px / 2); margin: 8px;width: (200px * 4); width: 800px;} }
    28. 28. Variables
    29. 29. Variables Combine you crazy developer, you!$wrapper: 960px; h1 { margin: 8px;h1 { width: 480px;margin: (16px / 2); }width: $wrapper / 2;}
    30. 30. Nesting
    31. 31. Nesting #stop .doing .this #stuff > .okay?.sidebar { .sidebar {width: 500px; width: 500px; h1 { } color: blue; .sidebar h1 { } color: blue;} }
    32. 32. Nesting
    33. 33. Nesting Don’t go overboard, though. Your styles should NOT be location dependent.
    34. 34. Nesting Don’t go overboard, though. Your styles should NOT be location dependent. Use wisely and with intention.
    35. 35. Mixins
    36. 36. Mixins Recycle, reduce, and argue?@mixin rounded($radius) { .box {-moz-border-radius: $radius; -moz-border-radius: 10px;border-radius: $radius; border-radius: 10px;} }.box {@include rounded(10px);}
    37. 37. Mixins Arguments are great to keep your CSS from repeating yourself.
    38. 38. Selector Inheritance
    39. 39. Selector Inheritance Inherit other properties without duplication.message { .message, .error {border-width: 1px; border-width: 1px;border-style: solid; border-style: solid;} }.error {@extend .message; .error {color: red; color: red;} }
    40. 40. Colors
    41. 41. Colors The prism meets the english teacherh1 { h1 {background: lighten(#CC0, 25%); background: #ffff4d;color: darken(#FFCC00, 10%); color: #cca300;} }h2 { h2 {background: desaturate(red, 15%); background: #ec1313;color: saturate(#855, 20%); color: #9e3f3f;} }
    42. 42. Colors
    43. 43. Colors Many, many more like:
    44. 44. Colors Many, many more like: hue
    45. 45. Colors Many, many more like: hue invert
    46. 46. Colors Many, many more like: hue invert complement
    47. 47. Colors Many, many more like: hue invert complement grayscale
    48. 48. Colors Many, many more like: hue invert complement grayscale alpha
    49. 49. Colors Many, many more like: hue invert complement grayscale alpha opacify?
    50. 50. Colors Many, many more like: hue invert complement grayscale alpha opacify? transparentize?!
    51. 51. Other Sass-y Things (Couldn’t help myself)
    52. 52. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled
    53. 53. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up.
    54. 54. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */
    55. 55. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not?
    56. 56. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request.
    57. 57. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request. • This means you can create “partials”.
    58. 58. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request. • This means you can create “partials”. • Numerous other features
    59. 59. Great! How do we use this thing?
    60. 60. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways.
    61. 61. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared.
    62. 62. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared. • Menu bar application (Compass.app ~$7)
    63. 63. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared. • Menu bar application (Compass.app ~$7) • More setup, but greater payoff. Don’t let new things scare you.
    64. 64. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared. • Menu bar application (Compass.app ~$7) • More setup, but greater payoff. Don’t let new things scare you. • Caveat: Can’t have some of the team editing .css docs on a project while the rest of the team edits .scss/.sass files. It’s all or nothing
    65. 65. When can we start using this?
    66. 66. When can we start using this? Today, silly!
    67. 67. When can we start using this? Today, silly! It just takes communication.
    68. 68. What is Compass?
    69. 69. What is Compass?An open-source CSS authoring framework!
    70. 70. What is Compass?An open-source CSS authoring framework! (Sass with more features)
    71. 71. Features of Compass
    72. 72. Features of Compass • Sass targets CSS while Compass targets CSS/HTML workflow.
    73. 73. Features of Compass • Sass targets CSS while Compass targets CSS/HTML workflow. • Compass makes repetitive bits of information easier to repeat.
    74. 74. Features of Compass • Sass targets CSS while Compass targets CSS/HTML workflow. • Compass makes repetitive bits of information easier to repeat. • Makes writing CSS3 easier and less pain-staking.
    75. 75. Quiz Time
    76. 76. Quiz TimeHow many browser prefixes are there to create a linear background gradient?
    77. 77. 4567
    78. 78. 4567
    79. 79. Using CSS3
    80. 80. Using CSS3background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%);
    81. 81. Using Compass
    82. 82. Using Compass@import "compass";.box {@include background(linear-gradient(#FFF, #000));}
    83. 83. background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%);
    84. 84. background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%); ta-da!
    85. 85. Border Radius with CSS3
    86. 86. Border Radius with CSS3 -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
    87. 87. Using Compass
    88. 88. Using Compass @import "compass"; .box { @include border-radius(10px); }
    89. 89. -moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;
    90. 90. -moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px; ta-da!
    91. 91. Other Compass Additions
    92. 92. Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset
    93. 93. Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset • Can take multiple images, combine them into a sprite, and give you classes and coordinates for each one. Insane.
    94. 94. Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset • Can take multiple images, combine them into a sprite, and give you classes and coordinates for each one. Insane. • Much, much more
    95. 95. We meet again, avocado
    96. 96. We meet again, avocado • Technology is changing rapidly
    97. 97. We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out.
    98. 98. We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out. • If it tastes delicious works out, great! If not, hey, we gave it a shot and we learned something new anyway.
    99. 99. We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out. • If it tastes delicious works out, great! If not, hey, we gave it a shot and we learned something new anyway. • Try something new and make something happen.

    ×