Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sass.The Future of Stylesheets.
Chris EppsteinFollow me @chriseppsteinArchitect - Caring.comCreator - Compass Stylesheet FrameworkCore Contributor - Sass
A website for caregivers of the sick and elderly.The right information at just the right timeWe’re HIRING!
Book:Sass & Compass In ActionBuy the pre-release now and save 40%http://www.manning.com/netherland/DISCOUNT CODE: sass40 (...
Today
RationaleWhy does Sass exist?What problems does it solve?
SyntaxWhat does Sass provide?
Best PracticesTips, tricks & pitfalls
Questions?Please ask them.
What is “Sass”?Syntactically Awesome StyleSheets
What is CSS?• Originated in Academia• 14 Years Old• Three Primitives:  ‣ Selectors  ‣ Properties  ‣ Values
CSS is Pretty.
CSS is Pretty.Pretty dumb.
Never in the history ofsoftware havedevelopers beenasked to do so muchwith so little.
Browsers & Versions
Multiple Form FactorsDesktop, Mobile, Print...
Dozens of Templates
Experiment & Test
Maintain Consistency
Performant
Due Yesterday
New Hotness:CSS333 New Selectors120+ New Properties3 New @-rulesEnhanced Media Queries
CSS3No new syntax** Yet.
CSS was designed for theMythical Designer who is too stupid tounderstand High School Algebra.
If you want to makesomething simple forbeginners...
...make it powerfulenough for the expertsto create that simplicity.
But...
There is an alternative.
What is Sass?• Born from Real World Experience• Brings Software Development Methodologies to Stylesheets: ‣ Reusable, dist...
What is Sass?New Primitives:• Variables       • Calculations• Mixins          • Functions• Selector        • Conditionals ...
What is Sass?It’s what CSS would have been if we hadknown then what we know now:Most stylesheets are written byprogrammers.
Problem:CSS StylesheetsAre hard to maintain
Don’tRepeatYourself(I don’t have to tell you this -- It’s not like you want to)
A single change.A single edit.A single compile.
We have machines.Let them do the busy work.
Problem:Same ColorMany Representations
Problem:Same ColorDifferent Reasons
rgba(#f00, 1.0)                   hsla(0deg, 100%, 100%, 1)hsl(0deg, 100%, 100%)                                  #f00  rg...
Solution:VariablesThe most requested CSS enhancement
Use variables anywhere a value is allowed.
Problem:Magic ValuesLost knowledge
Deceptively Complex
Solution:TransformationsDerive values during compilation
As complex as it actually is.
Sass Color Functionsmix(red, blue, 40%)         =>   #660099lighten(red, 10%)           =>   #ff3333darken(red, 10%)      ...
Solution:Make Reusable CalculationsWe call these things “functions”
Deceptively Complex
Solution:Abstractions &CalculationsDerive values during compilation
Create a simple abstraction
As complex as it actually is.
Best Practice:Minimize HTTP Round Trips
Problem:Long StylesheetsHard to find your styles.
And I mean long...                     Seriously, this keeps going...
Solution:Concatenation &Partials
Partials: Just like with html templates, underscores denote apartial and can only be imported by other stylesheets.Convent...
Problem:Shared StylesheetsStyles leak into places you didn’t intend
Sitewide Styles    Forum        Blog       Articles    DirectoryI    T   F   L    P     F   I   A   C   S   L   Rn    h   ...
Solution:Scoped Selectors
CSS gives youcarpal tunnelfrom typingyour scopesOVER &OVER AGAIN
Sass ProvidesDRY Selectorsvia nesting
Nested Selectors• Default: descendant• & - context reference• Works with combinatorsCo mp  ile     st       o
Problem:Dozens of ImagesSpriting is annoying
Solution:Compass Sprites
gem “compass”Simple Sprites(Compass makesclasses for you)                   Or you can define your                   own s...
Problem:Dozens More Images
Solution:Use CSS3 InsteadAbstract vendor prefixes away
gem “compass”
Best Practice:Use a CDN / Asset HostsLoad assets faster
Problem:Image URLs Change
Solution:Use URL HelpersJust like in Rails
o        st     ile  mpCo
Best Practice:Separate Content & Presentation
Problem:Classitis
Solution:Move Presentation ConcernsThey belong in your stylesheets
This is all you should need.
o            st         ile      mp    Co+                   Mixins
MixinsCreate a design vocabularyof common patterns independentfrom your markups selectordomain
More Mixins       +        Compiles to
More Mixins       +        Compiles to
More Mixins       +           Compiles to
This is all you should need.
Compiles toSelector Inheritance
We’ve OnlyScratched the Surfacehttp://sass-lang.comhttp://compass-style.org
My TeammatesLead Developer of SassNathan Wiezenbaum (@nex3)The Compass Core TeamEric Meyer (@eriiicam)Brandon Mathis (@ima...
Compass is CharitywareIf you use Compass and it makes your life better, please help make someone else’s life better by mak...
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Upcoming SlideShare
Loading in …5
×

Sass: The Future of Stylesheets

23,685 views

Published on

Published in: Technology

Sass: The Future of Stylesheets

  1. Sass.The Future of Stylesheets.
  2. Chris EppsteinFollow me @chriseppsteinArchitect - Caring.comCreator - Compass Stylesheet FrameworkCore Contributor - Sass
  3. A website for caregivers of the sick and elderly.The right information at just the right timeWe’re HIRING!
  4. Book:Sass & Compass In ActionBuy the pre-release now and save 40%http://www.manning.com/netherland/DISCOUNT CODE: sass40 (Good through Friday)
  5. Today
  6. RationaleWhy does Sass exist?What problems does it solve?
  7. SyntaxWhat does Sass provide?
  8. Best PracticesTips, 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 ofsoftware havedevelopers beenasked to do so muchwith so little.
  15. Browsers & Versions
  16. Multiple Form FactorsDesktop, Mobile, Print...
  17. Dozens of Templates
  18. Experiment & Test
  19. Maintain Consistency
  20. Performant
  21. Due Yesterday
  22. New Hotness:CSS333 New Selectors120+ New Properties3 New @-rulesEnhanced Media Queries
  23. CSS3No new syntax** Yet.
  24. CSS was designed for theMythical Designer who is too stupid tounderstand High School Algebra.
  25. If you want to makesomething simple forbeginners...
  26. ...make it powerfulenough for the expertsto create that simplicity.
  27. But...
  28. There is an alternative.
  29. What is Sass?• Born from Real World Experience• Brings Software Development Methodologies to Stylesheets: ‣ Reusable, distributable libraries ‣ DRY ‣ Define abstractions ‣ Adhere to architectural boundaries
  30. What is Sass?New Primitives:• Variables • Calculations• Mixins • Functions• Selector • Conditionals Inheritance • Loops
  31. What is Sass?It’s what CSS would have been if we hadknown then what we know now:Most stylesheets are written byprogrammers.
  32. Problem:CSS StylesheetsAre hard to maintain
  33. Don’tRepeatYourself(I don’t have to tell you this -- It’s not like you want to)
  34. A single change.A single edit.A single compile.
  35. We have machines.Let them do the busy work.
  36. Problem:Same ColorMany Representations
  37. Problem:Same ColorDifferent Reasons
  38. 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)
  39. Solution:VariablesThe most requested CSS enhancement
  40. Use variables anywhere a value is allowed.
  41. Problem:Magic ValuesLost knowledge
  42. Deceptively Complex
  43. Solution:TransformationsDerive values during compilation
  44. As complex as it actually is.
  45. Sass Color Functionsmix(red, blue, 40%) => #660099lighten(red, 10%) => #ff3333darken(red, 10%) => #cc0000desaturate(red, 10%) => #f20d0dsaturate(#511, 10%) => #5a0c0ctransparentize(red, 0.25) => rgba(255, 0, 0, 0.75)opacify(red, 0.25) => rgba(255, 0, 0, 0.75)grayscale(red) => #808080complement(red) => #00ffffThere’s more on the Sass website.
  46. Solution:Make Reusable CalculationsWe call these things “functions”
  47. Deceptively Complex
  48. Solution:Abstractions &CalculationsDerive values during compilation
  49. Create a simple abstraction
  50. As complex as it actually is.
  51. Best Practice:Minimize HTTP Round Trips
  52. Problem:Long StylesheetsHard to find your styles.
  53. And I mean long... Seriously, this keeps going...
  54. Solution:Concatenation &Partials
  55. Partials: Just like with html templates, underscores denote apartial and can only be imported by other stylesheets.Convention: Each folder has a file of the same name thatimports the files contained within it in the correct order.
  56. Problem:Shared StylesheetsStyles leak into places you didn’t intend
  57. Sitewide Styles Forum Blog Articles DirectoryI T F L P F I A C S L Rn h o i o o n r o e i ed r r s s r d t m a s ve e m t t m e i m r t ix a x c e c i e d l n h n w e t g
  58. Solution:Scoped Selectors
  59. CSS gives youcarpal tunnelfrom typingyour scopesOVER &OVER AGAIN
  60. Sass ProvidesDRY Selectorsvia nesting
  61. Nested Selectors• Default: descendant• & - context reference• Works with combinatorsCo mp ile st o
  62. Problem:Dozens of ImagesSpriting is annoying
  63. Solution:Compass Sprites
  64. gem “compass”Simple Sprites(Compass makesclasses for you) Or you can define your own selectors.
  65. Problem:Dozens More Images
  66. Solution:Use CSS3 InsteadAbstract vendor prefixes away
  67. gem “compass”
  68. Best Practice:Use a CDN / Asset HostsLoad assets faster
  69. Problem:Image URLs Change
  70. Solution:Use URL HelpersJust like in Rails
  71. o st ile mpCo
  72. Best Practice:Separate Content & Presentation
  73. Problem:Classitis
  74. Solution:Move Presentation ConcernsThey belong in your stylesheets
  75. This is all you should need.
  76. o st ile mp Co+ Mixins
  77. MixinsCreate a design vocabularyof common patterns independentfrom your markups selectordomain
  78. More Mixins + Compiles to
  79. More Mixins + Compiles to
  80. More Mixins + Compiles to
  81. This is all you should need.
  82. Compiles toSelector Inheritance
  83. We’ve OnlyScratched the Surfacehttp://sass-lang.comhttp://compass-style.org
  84. My TeammatesLead Developer of SassNathan Wiezenbaum (@nex3)The Compass Core TeamEric Meyer (@eriiicam)Brandon Mathis (@imathis)Scott Davis (@jetviper21)Nico Hagenburger (@hagenburger)
  85. Compass is CharitywareIf 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

×