Recommandé
Contenu connexe
En vedette
Similaire à Sass: CSS with Attitude
Similaire à Sass: CSS with Attitude (20)
Plus de John Albin Wilkins
Plus de John Albin Wilkins (20)
Dernier
Dernier (20)
Sass: CSS with Attitude
- 1. Sass : CSS 011 ign w ith A s ttitu Berlin 2 al De de June Drup Camp 6 25+2 John Albin W @Joh ilkins nAlbi http:/ n /www .flickr .com /phot os/phil yfn/5 5627 5594 3/
- 2. Why does CSS suck?
- 3. Why does CSS suck? ★ Redundancy
- 4. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
- 5. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy
- 6. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; }
- 7. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy
- 8. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc;
- 9. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc;
- 10. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc; box-shadow: 1px 1px 10px 3px #ccc; }
- 11. Sass sucks less
- 12. Sass sucks less ★ Sass is easy to learn: It is CSS + goodies
- 13. Sass sucks less ★ Sass is easy to learn: It is CSS + goodies ★ Browsers don’t understand sass
- 14. Sass sucks less ★ Sass is easy to learn: It is CSS + goodies ★ Browsers don’t understand sass ★ Sass is compiled
- 15. .empty-rules {} // and comments
- 16. .empty-rules {} // and comments ★ // Comments are not in rendered CSS
- 17. .empty-rules {} // and comments ★ // Comments are not in rendered CSS ★ /* Comments _are_ in rendered CSS */
- 18. .empty-rules {} // and comments ★ // Comments are not in rendered CSS ★ /* Comments _are_ in rendered CSS */ ★ .empty-rulesets {} // Not included.
- 19. nested { rules }
- 20. nested { rules } ★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } }
- 21. nested { rules } ★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } } ★ .block { font-size: 12px; } .block h2 { font-size: 20px; }
- 22. nested { rules }
- 23. nested { rules } ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
- 24. nested { rules } ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
- 25. nested { rules } ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
- 26. nested { rules }
- 27. nested { rules } ★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } }
- 28. nested { rules } ★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } } ★ .block { margin-bottom: 1.5em; } .block.last { margin-bottom: 0; } .body-class .block { margin-bottom: 2em; }
- 30. nested-properties ★ border: 2px solid #333; border-left: 1px dotted #ccc;
- 31. nested-properties ★ border: 2px solid #333; border-left: 1px dotted #ccc; ★ border: 2px solid #333 { left: 1px dotted #ccc; // border-left top { width: 1px; // border-top-width } }
- 32. $variables
- 33. $variables ★ $blue: #3bbfce; $default-font: Georgia, "Times New Roman", "DejaVu Serif", serif;
- 34. Math * 2
- 35. Math * 2 ★ $grid-width: 960px / 8;
- 36. Math * 2 ★ $grid-width: 960px / 8; ★ Any of these: + - * / %
- 38. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix()
- 39. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix() ★ HSL functions hsla(), lighten(), darken(), desaturate()
- 40. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix() ★ HSL functions hsla(), lighten(), darken(), desaturate() ★ Opacity functions opacify(), transparentize()
- 41. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix() ★ HSL functions hsla(), lighten(), darken(), desaturate() ★ Opacity functions opacify(), transparentize() ★ Make your own! ponycorn()
- 42. _Partials
- 43. _Partials ★ Shared resources for your project.
- 44. _Partials ★ Shared resources for your project. ★ Name them with an underscore. Include them without an underscore.
- 45. _Partials ★ Shared resources for your project. ★ Name them with an underscore. Include them without an underscore. ★ @include “partial”;
- 46. @ mixins
- 47. @ mixins ★ #main { @include element-invisible; }
- 48. compile / watch
- 49. compile / watch ★ sass sass/style.scss css/style.css
- 50. compile / watch ★ sass sass/style.scss css/style.css ★ sass --watch sass:css
- 51. FireSass
- 52. FireSass ★ sass --debug-info --watch sass:css
- 53. Compass
- 55. Compass ★ package manager ★ frameworks/groups of pre-built functionality
- 56. compass watch
- 57. compass watch ★ The magic is in config.rb
- 58. compass watch ★ The magic is in config.rb ★ compass watch .
- 59. More Awesome
- 60. More Awesome ★ Sass: http://sass-lang.com
- 61. More Awesome ★ Sass: http://sass-lang.com ★ Compass: http://compass-style.org
- 62. More Awesome ★ Sass: http://sass-lang.com ★ Compass: http://compass-style.org ★ Zen 7.x-5.x
Notes de l'éditeur
- \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