Harnessing the Power of Sass

Presented at a Salesforce UX Meetup, hosted by Desk

Transcript

1. Harnessing the Power of Sass JINA BOLTON // PRODUCT DESIGNER // DO SALESFORCE UX MEETUP
2. WORK BETTER, TOGETHER
3. “A fractured process makes for a fractured user experience.” —NATE FORTIN
4. “It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle.” —PAUL SAFFO
5. Creating pages
6. Creating systems
7. CSS Preprocessors: SCRIPTING LANGUAGES THAT PROVIDE ADDITIONAL AUTHORING FUNCTIONALITY TO CSS.
8. Stylus
9. sass-lang.com
10. Better maintainability DRYer development Patterns & Proportions
11. Nesting USE (CAREFULLY) TO AVOID REPETITION
12. Output ul.items a ... &:hover ... .ie-6 & ... ul.items a { ... } ul.items:hover { ... } .ie-6 ul.items a { ... } Sass
13. Output ul.items a ... @media print ... ul.items { ... } @media print { ul.items { ... } } Sass
14. Output .sidebar border: 1px solid #eee top-color: #fff left: 0 .sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0; } Sass
15. Nesting more than 3 levels deep? Refactor.
16. Variables STORE COMMON ATTRIBUTES FOR MAINTAINABILITY
17. Output $text: #444 $bg: $text body color: $text footer background: $bg body { color: #444; } footer { background: #444; } Sass
18. Mixins STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
19. Output =mod($txt: #ccc) background: #111 color: $txt body +mod h1 +mod(#888) body { background: #111; color: #ccc; } h1 { background: #111; color: #888; } Sass
20. Extend CHAIN SELECTORS TOGETHER
21. Output .message padding: 1em a color: #369 .error @extend .message color: #eee .message, .error { padding: 1em; } .message a, .error a { color: #369; } .error { color: #eee; } Sass
22. Placeholder Selectors CREATE SILENT CLASSES THAT DON’T GET OUTPUT
23. Output %grid-1 width: 240px %grid-2 width: 480px .content @extend %grid-1 color: #369 .main @extend %grid-1 background: #eee .content, .main { width: 240px; } .content { color: #369; } .main { background: #eee; } Sass
24. oocss.org
25. DO’S WEB APPLICATION
26. Deathstar DO’S WEB APPLICATION
27. DO’S WEBSITE
28. Kenobi DO’S WEBSITE
29. KENOBI.CSS.SASS DEATHSTAR.CSS.SASS
30. KENOBI.CSS.SASS DEATHSTAR.CSS.SASS
31. KENOBI.CSS.SASS DEATHSTAR.CSS.SASS
32. vendor/_shared.sass @import compass @import compass/layout @import susy kenobi.css.sass @import vendor/shared deathstar.css.sass @import bootstrap/variables @import bootstrap/mixins @import vendor/shared 01 // vendor libraries
33. dependencies/_shared.sass @import metrics @import typography @import colors @import themes Globally used variables, mixins, & functions 01 // vendor libraries 02 // dependencies
34. foundation/_shared.sass @include border-box-sizing @import ../vendor/normalize @import base Plain old semantic HTML 01 // vendor libraries 02 // dependencies 03 // foundation
35. http://paulirish.com/2012/box-sizing-border-box-ftw/
36. kenobi.css.sass @import foundation/shared @import foundation/kenobi deathstar @import foundation/shared Kenobi has a different font, so we override them after importing shared styles. 01 // vendor libraries 02 // dependencies 03 // foundation
37. components/_shared.sass @import icons @import buttons @import toggles @import messages @import pagination Modular components & their states. 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components
38. regions/_shared.sass @import banner @import navigation @import complementary @import contentinfo Page regions, named after their class or role names 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions
39. helpers/_shared.sass @import nonsemantic-classes @import placeholder-selectors Non-semantic helpers 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers
40. responsive/_shared.sass @import responsive/mobile @import responsive/tablet @import responsive/screen Adjustments to type sizes, grids, and images. 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive
41. _SCREEN.SASS _BANNER.SASS _NAVIGATION.SASS _CONTENTINFO.SASS Use mixins to keep responsive styles in context, but output media queries together at the end.
42. <% if Rails.env.development? && Settings.show_grids %> @import tools/show-grid <% end %> 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive 08 // tools
43. } 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive 08 // tools Put new CSS in the proper place. Move old CSS as you come to it. Move more CSS if you have tech debt time.
44. Style Guides + Sass go together perfectly.
45. blog.engineyard.com/front-end-maintainability-with-sass-and-style-guides
46. ENGINE YARD APP CLOUD, EARLY 2011
47. CODE STYLES DOCUMENTED AS YOU GO
48. Try a responsive iframe sandbox during development.
49. VIEW ALL SIZE-BASED MEDIA QUERIES AT ONCE WITH IFRAMES
50. Color MAINTAINABILITY WITH SASS & STYLE GUIDES
51. Create a simple color palette. Use Sass to make variations.
52. $x: #369 $y: #fff .a color: lighten($x, 5%) .b color: darken($x, 5%) .c color: saturate($x, 5%) .e color: mix($x, $y)
53. Use your Sass variables to generate a living color palette in your style guide.
54. Make variables for common pairings of colors & Sass color functions, and document it.
55. Engine Yard App Cloud, Early 2011
56. _header.sass $black: #000 $grey: #eee $white: invert($black) $h-bg-color: $black $h-text-color: $grey $h-link-color: $white _colors.sass
57. sassme.arc90.com
58. Make mixins for common pairings of background, text, & shadow colors.
59. Typography CREATE A SMART SYSTEM
60. Choose a standard base unit. 4 is good; it multiplies into 8, 12, 16, etc.
61. Create mixins for your various type styles. Small and all caps, big quote styles, etc. Document them.
62. Don’t try to refactor and document everything at once. You’ll likely give up.
63. Do refactor & document going forward, in iterations.
64. “Be regular and orderly in your life so that you may be violent and original in your work.” —GUSTAVE FLAUBERT
65. dribbble: @DOWORKTOGETHER
66. DO.COM @DOWORKTOGETHER