How to use Sass and the Compass stylesheet framework to build unobtrusive stylesheets for your website.

1. Thursday, March 19, 2009

2. Building Unobtrusive Stylesheets
with Sass & Compass
For faster development and easier maintenance
Thursday, March 19, 2009

3. Chris Eppstein
Web UI Architect for 7 years
Software Architect for Caring.com for the last 2 years
Member of the Sass core team
Creator of Compass, the first Sass framework
Thursday, March 19, 2009

4. Assumptions
You know HTML
You know CSS
You don’t look forward to the design phase
You’re tired of reinventing the wheel when you design
Thursday, March 19, 2009

5. What is an Unobtrusive Stylesheet?
Makes no requirements on content
Only affects targeted content
Thursday, March 19, 2009

6. Why build Unobtrusive Stylesheets?
Initial implementation is faster
Changing design is faster
More flexibility for theming and alternate stylesheets
Redesigns made easier
Better SEO
Thursday, March 19, 2009

7. Being Unobtrusive with CSS is Hard
You need better tools
Thursday, March 19, 2009

8. Unobtrusive
Footer
without
Sass &
Compass
Thursday, March 19, 2009

9. Unobtrusive
Footer
with
Sass &
Compass
Thursday, March 19, 2009

10. Unobtrusive
Homepage
without
Sass &
Compass
Thursday, March 19, 2009

11. Unobtrusive
Homepage
with
Sass &
Compass
Thursday, March 19, 2009

12. Case Study: Caring.com
Entire UI Redesign took the team two weeks
Front-end development times down by ~40%
Thursday, March 19, 2009

13. What Makes Unobtrusive Hard?
Repetitive Selectors
– AND –
Copy & Paste Styling
Thursday, March 19, 2009

14. What Makes Unobtrusive Hard?
Repetitive Selectors
– AND –
Copy & Paste Styling
Thursday, March 19, 2009

15. What Makes Unobtrusive Hard?
Repetitive Selectors
– AND –
Copy & Paste Styling
Thursday, March 19, 2009

16. Sass Makes Unobtrusive Easy
Simple Descendant
Selectors
– AND –
Abstraction
Thursday, March 19, 2009

17. Sass Makes Unobtrusive Easy
Simple Descendant
Selectors
– AND –
Abstraction
Thursday, March 19, 2009

18. Sass Makes Unobtrusive Easy
Simple Descendant
Selectors
– AND –
Abstraction
Thursday, March 19, 2009

19. Sass Is Whitespace Aware
Indented selectors are descendant selectors
Not DRY
DRY
Thursday, March 19, 2009

20. Sass is Good at Permutation
DRY
Not DRY
Thursday, March 19, 2009

21. More Sass Syntax
Thursday, March 19, 2009

22. More Sass Syntax
Variables
Thursday, March 19, 2009

23. More Sass Syntax
Variables
Thursday, March 19, 2009

24. More Sass Syntax
Attribute Namespaces
Thursday, March 19, 2009

25. More Sass Syntax
Attribute Namespaces
Thursday, March 19, 2009

26. More Sass Syntax
Mixins
Thursday, March 19, 2009

27. More Sass Syntax
Mixins
Thursday, March 19, 2009

28. More Sass Syntax
Parent References
Thursday, March 19, 2009

29. More Sass Syntax
Parent References
Thursday, March 19, 2009

30. More Sass Syntax
Expressions
Thursday, March 19, 2009

31. More Sass Syntax
Expressions
Thursday, March 19, 2009

32. More Sass Syntax
Other Benefits of Compilation:
Environment-dependent output SassScript
formats
Partials & imports
Silent comments
Thursday, March 19, 2009

33. There’s No
Excuse Now
Go forth and scope to
your heart’s content
Thursday, March 19, 2009

34. A Cute Little Trick
Ever notice how Haml looks like CSS?
Selectors
Delete
Write Haml ready to
some stuff style
Via: Lachlan Hardy
Thursday, March 19, 2009

35. CSS Lacks Abstraction
Classes are not for Style Reuse
Thursday, March 19, 2009

36. You’ve been picking the
lesser of two evils, right?
Copy & Paste
Presentational Class Names
Thursday, March 19, 2009

37. Sass Mixins are Abstract Classes
+
Thursday, March 19, 2009

38. Sass Mixins are Abstract Classes
+
Thursday, March 19, 2009

39. Sass Mixins are Abstract Classes
+
Thursday, March 19, 2009

40. Sass Mixins are Abstract Classes
+
Thursday, March 19, 2009

41. Sass Mixins are Abstract Classes
+
Thursday, March 19, 2009

42. Sass Mixins are CSS Macros
When you need to apply the
same styles to different
selectors
Thursday, March 19, 2009

43. Sass Script is Turing Complete
Credit: Nathan Weizenbaum
Thursday, March 19, 2009

44. Sass Script is Turing Complete
Credit: Nathan Weizenbaum
Thursday, March 19, 2009

45. The Only Limitation is Your
Imagination
and CSS...
Thursday, March 19, 2009

46. Sass is a Language
Compass is an Ecosystem
Thursday, March 19, 2009

47. Compass Makes Frameworks Work
Thursday, March 19, 2009

48. Building Web UIs Can Be Fun Again!
Thursday, March 19, 2009

49. Compass Provides
Built-in framework ports: Blueprint, YUI
Installable plugins: 960.gs
Core library
Reset
Sass compilation for stand-alone projects
Application framework integration
Thursday, March 19, 2009

50. Add Compass to your Rails
Application
Sass has Merb/Rails integration that
automatically recompiles stylesheets.
Thursday, March 19, 2009

51. Where’s the Sass?
Compass stores its sass files in its gem
Easy upgrades
rake gems:unpack GEM=chriseppstein-compass
Thursday, March 19, 2009

52. Compass’s Blueprint Port
contains a Layout DSL
Configuration Parameters
+container
+column(n,last) !blueprint_grid_columns
+last
!blueprint_grid_width
+append(n)
!blueprint_grid_margin
+prepend(n)
Oh and it does some basic
+push(n)
styling for you if you want that.
+pull(n)
+blueprint-typography
+blueprint-form
Thursday, March 19, 2009

53. Thursday, March 19, 2009

54. Compass’s YUI Port is
Configurable & Semantic
YUI uses class descendants to layout grid blocks -- this
makes it more complex to abstract and use than
Blueprint
Compass lets you configure the sizes, class names,
selectors, and IDs
Sophisticated Font System (%-based specified in px)
Source-order independent, Zoom friendly grids
+font-size(size, base_size)
+yui-base +yui-document(width)
And much, much more...
Thursday, March 19, 2009

55. Thursday, March 19, 2009

56. Compass Makes
Frameworks à la Carte
At Caring.com we use Blueprint’s grids, Compass’s
reset, YUI’s Base and Font system
Thursday, March 19, 2009

57. Compass Core Library
CSS Reset Link styling
Sticky Footer List Styling (bullets,
orientation)
Clearfix
Table styling
Tag Cloud
(background colors,
borders)
Cross-browser inline-
block
Text Replacement
Thursday, March 19, 2009

58. Thursday, March 19, 2009

59. Real World Rails Example
http://compass-style.org/
Code at:
http://github.com/chriseppstein/compass-style.org
Thursday, March 19, 2009

60. The Future of Compass & Sass
Haml & Sass 2.2, Compass:
Compass 1.0 stable Page Scaffolds (script/generate
releases are imminent scaffold should be pretty!)
Design Sharing
Sass:
Cultivate Plugin Ecosystem
Stylesheet Optimizer
Registry
Multiple styles rules per line
Installer
New output formats
Other CSS Frameworks
Localized Imports
Thursday, March 19, 2009

61. Open Sourced
On Github
• This slide deck and related code:
http://github.com/chriseppstein/presentations
• Sass is part of Haml:
http://github.com/nex3/haml
• Compass:
http://github.com/chriseppstein/compass
Thursday, March 19, 2009

62. ?
Q&A
Thursday, March 19, 2009