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

8,389

Published on

Published in: Technology
1 Comment
17 Likes
Statistics
Notes
  • I have to begin that stuff right away !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,389
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
146
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Yes, it’s an acronym.\n But, it’s *not* all caps.\n Why? I don’t know. \n Alternate Syntax\nCompiles to CSS\nTo understand Sass, you must know CSS\n \n
  • \n
  • CSS Selectors are great -- that’s why we use them in jQuery & Haml\nProperties are simple key/value pairs.\nCSS is elegantly simple.\n
  • Maybe my memory doesn’t go back very far.\n\nI’m sure punch cards and assembler sucked.\n
  • 9 Browsers\n25 Versions\nPace of development is increasing\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CSS is a major front for the Browser War v2.0\nCasualty of War: Front-End Developers\nWhat do all of these new features have in common?\nThey’re all about the browser -- None of them address how we author stylesheets. \n
  • \n
  • \n
  • \n
  • I think rails is a great example of this. Ruby is incredibly powerful, that power makes the best practices of web programming accessible and scaffolds the n00bs during the learning process as they peel the layers of abstraction back.\n
  • \n
  • What if we gave stylesheets some brains?\n
  • \n
  • Alternate Syntax\nCompiles to CSS\nWe’ll get to these primitives in a second\n\n
  • But: Sass in the hands in of a technical designer is a BEAUTIFUL THING\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Accidentally the same?\n
  • You cannot safely Search and Replace a color.\n
  • \n
  • \n
  • \n
  • \n
  • where do these colors come from? Clearly they’re related -- must be designer voodoo.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Why is it 366px? If I want to change the border width, how should I adjust these values?\n
  • \n
  • Now our changes are obvious and the implementation details elided.\n
  • Currently most of these calculations are done on a scratch pad.\n\nseriously.\n
  • \n
  • Don’t use CSS @import.\n Serve a few, longer stylesheets.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Notice that comma selectors are permuted\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Compass CSS3 mixin arguments mimic the real css3 property values.\n
  • \n
  • \n
  • relative paths\nroot relative paths\nroot changes\nasset hosts\ncdns\n\n\n
  • \n
  • \n
  • \n
  • Do you have markup that looks like this?\n
  • You’re officially doing it wrong.\n\nBut I get it. You need re-use.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sass: The Future of Stylesheets

    1. 1. Sass.The Future of Stylesheets.
    2. 2. Chris EppsteinFollow me @chriseppsteinArchitect - Caring.comCreator - Compass Stylesheet FrameworkCore Contributor - Sass
    3. 3. A website for caregivers of the sick and elderly.The right information at just the right timeWe’re HIRING!
    4. 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. 5. Today
    6. 6. RationaleWhy does Sass exist?What problems does it solve?
    7. 7. SyntaxWhat does Sass provide?
    8. 8. Best PracticesTips, tricks & pitfalls
    9. 9. Questions?Please ask them.
    10. 10. What is “Sass”?Syntactically Awesome StyleSheets
    11. 11. What is CSS?• Originated in Academia• 14 Years Old• Three Primitives: ‣ Selectors ‣ Properties ‣ Values
    12. 12. CSS is Pretty.
    13. 13. CSS is Pretty.Pretty dumb.
    14. 14. Never in the history ofsoftware havedevelopers beenasked to do so muchwith so little.
    15. 15. Browsers & Versions
    16. 16. Multiple Form FactorsDesktop, Mobile, Print...
    17. 17. Dozens of Templates
    18. 18. Experiment & Test
    19. 19. Maintain Consistency
    20. 20. Performant
    21. 21. Due Yesterday
    22. 22. New Hotness:CSS333 New Selectors120+ New Properties3 New @-rulesEnhanced Media Queries
    23. 23. CSS3No new syntax** Yet.
    24. 24. CSS was designed for theMythical Designer who is too stupid tounderstand High School Algebra.
    25. 25. If you want to makesomething simple forbeginners...
    26. 26. ...make it powerfulenough for the expertsto create that simplicity.
    27. 27. But...
    28. 28. There is an alternative.
    29. 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. 30. What is Sass?New Primitives:• Variables • Calculations• Mixins • Functions• Selector • Conditionals Inheritance • Loops
    31. 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. 32. Problem:CSS StylesheetsAre hard to maintain
    33. 33. Don’tRepeatYourself(I don’t have to tell you this -- It’s not like you want to)
    34. 34. A single change.A single edit.A single compile.
    35. 35. We have machines.Let them do the busy work.
    36. 36. Problem:Same ColorMany Representations
    37. 37. Problem:Same ColorDifferent Reasons
    38. 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. 39. Solution:VariablesThe most requested CSS enhancement
    40. 40. Use variables anywhere a value is allowed.
    41. 41. Problem:Magic ValuesLost knowledge
    42. 42. Deceptively Complex
    43. 43. Solution:TransformationsDerive values during compilation
    44. 44. As complex as it actually is.
    45. 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. 46. Solution:Make Reusable CalculationsWe call these things “functions”
    47. 47. Deceptively Complex
    48. 48. Solution:Abstractions &CalculationsDerive values during compilation
    49. 49. Create a simple abstraction
    50. 50. As complex as it actually is.
    51. 51. Best Practice:Minimize HTTP Round Trips
    52. 52. Problem:Long StylesheetsHard to find your styles.
    53. 53. And I mean long... Seriously, this keeps going...
    54. 54. Solution:Concatenation &Partials
    55. 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. 56. Problem:Shared StylesheetsStyles leak into places you didn’t intend
    57. 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. 58. Solution:Scoped Selectors
    59. 59. CSS gives youcarpal tunnelfrom typingyour scopesOVER &OVER AGAIN
    60. 60. Sass ProvidesDRY Selectorsvia nesting
    61. 61. Nested Selectors• Default: descendant• & - context reference• Works with combinatorsCo mp ile st o
    62. 62. Problem:Dozens of ImagesSpriting is annoying
    63. 63. Solution:Compass Sprites
    64. 64. gem “compass”Simple Sprites(Compass makesclasses for you) Or you can define your own selectors.
    65. 65. Problem:Dozens More Images
    66. 66. Solution:Use CSS3 InsteadAbstract vendor prefixes away
    67. 67. gem “compass”
    68. 68. Best Practice:Use a CDN / Asset HostsLoad assets faster
    69. 69. Problem:Image URLs Change
    70. 70. Solution:Use URL HelpersJust like in Rails
    71. 71. o st ile mpCo
    72. 72. Best Practice:Separate Content & Presentation
    73. 73. Problem:Classitis
    74. 74. Solution:Move Presentation ConcernsThey belong in your stylesheets
    75. 75. This is all you should need.
    76. 76. o st ile mp Co+ Mixins
    77. 77. MixinsCreate a design vocabularyof common patterns independentfrom your markups selectordomain
    78. 78. More Mixins + Compiles to
    79. 79. More Mixins + Compiles to
    80. 80. More Mixins + Compiles to
    81. 81. This is all you should need.
    82. 82. Compiles toSelector Inheritance
    83. 83. We’ve OnlyScratched the Surfacehttp://sass-lang.comhttp://compass-style.org
    84. 84. My TeammatesLead Developer of SassNathan Wiezenbaum (@nex3)The Compass Core TeamEric Meyer (@eriiicam)Brandon Mathis (@imathis)Scott Davis (@jetviper21)Nico Hagenburger (@hagenburger)
    85. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×