Sassy! Stylesheets with SCSS by Kathryn Rotondo

1,014 views

Published on

If you’ve ever wished for more readable and maintainable CSS, SCSS (the current version of Sass) is the tool you’ve been waiting for. SCSS builds upon CSS3 to add features such as reusable variables and blocks, functions for manipulating colors and doing mathematical operations, selector nesting, and style inheritance. Before deploying, you simply compile your SCSS into ordinary CSS files in one easy (and easily automated) step.

This session will present the core features of SCSS with helpful examples, and get you excited about writing CSS again.

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

No Downloads
Views
Total views
1,014
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Sassy! Stylesheets with SCSS by Kathryn Rotondo

  1. 1. Sassy!Stylesheets with SCSSKathryn Rotondo@krotondoThis work is licensed underhttp://creativecommons.org/licenses/by-nc-sa/3.0Saturday, May 11, 13
  2. 2. What isSCSS?Saturday, May 11, 13
  3. 3. SCSS:Sassy CSSSaturday, May 11, 13
  4. 4. A supersetof CSS3Saturday, May 11, 13
  5. 5. FeaturesVariablesMixinsFunctionsNestingInheritanceSaturday, May 11, 13
  6. 6. CSS pre-processorSaturday, May 11, 13
  7. 7. style.scssstyle.cssSaturday, May 11, 13
  8. 8. GettingStartedSaturday, May 11, 13
  9. 9. Ruby Gemhttp://sass-lang.com/download.htmlSaturday, May 11, 13
  10. 10. Hammerhammerformac.comSaturday, May 11, 13
  11. 11. Ready toCode!Saturday, May 11, 13
  12. 12. VariablesconstantsSaturday, May 11, 13
  13. 13. Declare Vars$blue: #3bbfce;$margin: 16px;Saturday, May 11, 13
  14. 14. Use Vars.border {color: $blue;margin:$margin;}Saturday, May 11, 13
  15. 15. Variablesnumbers 1.2, 13, 10pxstrings "foo", bar, bazcolors blue, #04a3f9booleans true, falsenulls nulllists 1.5em 1em 0 2emHelvetica, Arial, ...Saturday, May 11, 13
  16. 16. Mixinsreusable codeblocksSaturday, May 11, 13
  17. 17. Declare Mixin@mixin centered {display:block;margin-left:auto;margin-right:auto;}Saturday, May 11, 13
  18. 18. Use Mixinimg {@include: centered;}Saturday, May 11, 13
  19. 19. Mixin Args@mixin border-radius ($radius) {-moz-border-radius: $radius;-webkit-border-radius: $radius;border-radius: $radius;}Saturday, May 11, 13
  20. 20. Mixin Args Useimg {@include border-radius(20px);}Saturday, May 11, 13
  21. 21. Vendor Prefixes@mixin box-shadow ($h-shadow, $v-shadow, $blur, $color) {-moz-box-shadow: $h-shadow $v-shadow $blur $color;-webkit-box-shadow: $h-shadow $v-shadow $blur $color;box-shadow: $h-shadow $v-shadow $blur $color;}@mixin drop-shadow {$args: 0 15px 30px rgba(0,0,0,.5);-webkit-filter: drop-shadow(args);-moz-filter: drop-shadow(args);-ms-filter: drop-shadow (args);-o-filter: drop-shadow (args);filter: drop-shadow (args);}Saturday, May 11, 13
  22. 22. Functionscolors, math,& moreSaturday, May 11, 13
  23. 23. Color Functionsrgb, rgba/hsl, hslalighten/darkencomplement, invertopacify, transparentize... & more!Saturday, May 11, 13
  24. 24. Function Useh1 {color:lighten($main-color, 20%);}h2 {color:complement($main-color);}Saturday, May 11, 13
  25. 25. Basic Math.border {color: $blue;margin:$margin;padding: $margin/2;}Saturday, May 11, 13
  26. 26. Math Functionspercentageround, ceil, floormin, maxabsSaturday, May 11, 13
  27. 27. More Functionshttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlSaturday, May 11, 13
  28. 28. Nestingorganizinglike with likeSaturday, May 11, 13
  29. 29. Nestinga {color: $link-color;&:hover {color: $link-hover-color;}}Saturday, May 11, 13
  30. 30. More Nesting#nav {a {color:$nav-color;&:hover {color: $nav-hover-color;}}}Saturday, May 11, 13
  31. 31. Inheritanceavoid duplicationSaturday, May 11, 13
  32. 32. Inheritance.error {background: #fdd;}.badError {@extend .error;border-width: 3px;}Saturday, May 11, 13
  33. 33. Comments// get removed/* stay around */Saturday, May 11, 13
  34. 34. Danke!Kathryn Rotondokathrynrotondo.com@krotondoThis work is licensed underhttp://creativecommons.org/licenses/by-nc-sa/3.0Saturday, May 11, 13

×