The document discusses Sass, a CSS extension language that adds powerful features like variables, nested rules, mixins, functions and more. It outlines problems with traditional CSS like repetition, maintenance issues and lack of abstraction capabilities. Sass aims to solve these through its additional features that allow for more modular, reusable and maintainable stylesheets. It also introduces Compass, a Sass extension framework and library, and discusses best practices like organization, sprites and separation of concerns.

1. Sass.
The Future of Stylesheets.

2. Chris Eppstein
Follow me @chriseppstein
Architect - Caring.com
Creator - Compass Stylesheet Framework
Core Contributor - Sass

3. A website for caregivers of the sick and elderly.
The right information at just the right time
We’re HIRING!

4. Book:
Sass & Compass In Action
Buy the pre-release now and save 40%
http://www.manning.com/netherland/
DISCOUNT CODE: sass40 (Good through Friday)

5. Today

6. Rationale
Why does Sass exist?
What problems does it solve?

7. Syntax
What does Sass provide?

8. Best Practices
Tips, tricks & pitfalls

9. Questions?
Please ask them.

10. What is “Sass”?
Syntactically Awesome StyleSheets

11. What is CSS?
• Originated in Academia
• 14 Years Old
• Three Primitives:
‣ Selectors
‣ Properties
‣ Values

12. CSS is Pretty.

13. CSS is Pretty.
Pretty dumb.

14. Never in the history of
software have
developers been
asked to do so much
with so little.

15. Browsers & Versions

16. Multiple Form Factors
Desktop, Mobile, Print...

17. Dozens of Templates

18. Experiment & Test

19. Maintain Consistency

20. Performant

21. Due Yesterday

22. New Hotness:
CSS3
33 New Selectors
120+ New Properties
3 New @-rules
Enhanced Media Queries

23. CSS3
No new syntax*
* Yet.

25. CSS was designed for the
Mythical Designer who is too stupid to
understand High School Algebra.

26. If you want to make
something simple for
beginners...

27. ...make it powerful
enough for the experts
to create that simplicity.

28. But...

29. There is an alternative.

30. What is Sass?
• Born from Real World Experience
• Brings Software Development
Methodologies to Stylesheets:
‣ Reusable, distributable libraries
‣ DRY
‣ Define abstractions
‣ Adhere to architectural boundaries

31. What is Sass?
New Primitives:
• Variables • Calculations
• Mixins • Functions
• Selector • Conditionals
Inheritance • Loops

32. What is Sass?
It’s what CSS would have been if we had
known then what we know now:
Most stylesheets are written by
programmers.

33. Problem:
CSS Stylesheets
Are hard to maintain

34. Don’t
Repeat
Yourself
(I don’t have to tell you this -- It’s not like you want to)

35. A single change.
A single edit.
A single compile.

36. We have machines.
Let them do the busy work.

37. Problem:
Same Color
Many Representations

38. Problem:
Same Color
Different Reasons

40. rgba(#f00, 1.0)
hsla(0deg, 100%, 100%, 1)
hsl(0deg, 100%, 100%)
#f00
rgb(255, 0, 0) red
RED rgba(255, 0, 0, 1.0)

41. Solution:
Variables
The most requested CSS enhancement

42. Use variables anywhere a value is allowed.

44. Problem:
Magic Values
Lost knowledge

45. Deceptively Complex

46. Solution:
Transformations
Derive values during compilation

47. As complex as it actually is.

48. Sass Color Functions
mix(red, blue, 40%) => #660099
lighten(red, 10%) => #ff3333
darken(red, 10%) => #cc0000
desaturate(red, 10%) => #f20d0d
saturate(#511, 10%) => #5a0c0c
transparentize(red, 0.25) => rgba(255, 0, 0, 0.75)
opacify(red, 0.25) => rgba(255, 0, 0, 0.75)
grayscale(red) => #808080
complement(red) => #00ffff
There’s more on the Sass website.

49. Solution:
Make Reusable Calculations
We call these things “functions”

51. Deceptively Complex

52. Solution:
Abstractions &
Calculations
Derive values during compilation

53. Create a simple abstraction

54. As complex as it actually is.

55. Best Practice:
Minimize HTTP Round Trips

56. Problem:
Long Stylesheets
Hard to find your styles.

57. And I mean long...
Seriously, this keeps going...

58. Solution:
Concatenation &
Partials

59. Partials: Just like with html templates, underscores denote a
partial and can only be imported by other stylesheets.
Convention: Each folder has a file of the same name that
imports the files contained within it in the correct order.

60. Problem:
Shared Stylesheets
Styles leak into places you didn’t intend

61. Sitewide Styles
Forum Blog Articles Directory
I T F L P F I A C S L R
n h o i o o n r o e i e
d r r s s r d t m a s v
e e m t t m e i m r t i
x a x c e c i e
d l n h n w
e t g

62. Solution:
Scoped Selectors

63. CSS gives you
carpal tunnel
from typing
your scopes
OVER &
OVER AGAIN

64. Sass Provides
DRY Selectors
via nesting

65. Nested Selectors
• Default: descendant
• & - context reference
• Works with combinators
Co
mp
ile
st
o

66. Problem:
Dozens of Images
Spriting is annoying

67. Solution:
Compass Sprites

68. gem “compass”
Simple Sprites
(Compass makes
classes for you)
Or you can define your
own selectors.

70. Problem:
Dozens More Images

71. Solution:
Use CSS3 Instead
Abstract vendor prefixes away

73. gem “compass”

75. Best Practice:
Use a CDN / Asset Hosts
Load assets faster

76. Problem:
Image URLs Change

77. Solution:
Use URL Helpers
Just like in Rails

78. o
st
ile
mp
Co

79. Best Practice:
Separate Content & Presentation

80. Problem:
Classitis

82. Solution:
Move Presentation Concerns
They belong in your stylesheets

83. This is all you should need.

84. o
st
ile
mp
Co
+
Mixins

85. Mixins
Create a design vocabulary
of common patterns independent
from your markup's selector
domain

86. More Mixins
+
Compiles to

87. More Mixins
+
Compiles to

88. More Mixins
+
Compiles to

89. This is all you should need.

90. Compiles to
Selector Inheritance

91. We’ve Only
Scratched the Surface
http://sass-lang.com
http://compass-style.org

92. My Teammates
Lead Developer of Sass
Nathan Wiezenbaum (@nex3)
The Compass Core Team
Eric Meyer (@eriiicam)
Brandon Mathis (@imathis)
Scott Davis (@jetviper21)
Nico Hagenburger (@hagenburger)

93. Compass is Charityware
If you use Compass and it makes your life better, please help
make someone else’s life better by making a tax-deductible
donation to the United Mitochondrial Disease Foundation.
http://umdf.org/compass