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.
3. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
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. 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. 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. 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. 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. 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!
16. Seriously though. Sass...
• Is an extension of CSS to utilize the DRY principle. (Don’t
repeat yourself)
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.
18. 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.
19. 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.
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.
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.
23. 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.
24. 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.
54. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
55. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
56. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
• /* This will */
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?
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.
59. 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”.
60. 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
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.
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.
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)
65. 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.
66. 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
75. Features of Compass
• Sass targets CSS while Compass targets CSS/HTML
workflow.
76. Features of Compass
• Sass targets CSS while Compass targets CSS/HTML
workflow.
• Compass makes repetitive bits of information easier to
repeat.
77. 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.
104. 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.
105. 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
107. We meet again, avocado
• Technology is changing rapidly
108. 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.
109. 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.
110. 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.