Sass: The Future of Stylesheets
Upcoming SlideShare
Loading in...5
×
 

Sass: The Future of Stylesheets

on

  • 7,820 views

 

Statistics

Views

Total Views
7,820
Views on SlideShare
6,112
Embed Views
1,708

Actions

Likes
15
Downloads
127
Comments
1

12 Embeds 1,708

http://mobicon.tistory.com 1486
http://en.oreilly.com 180
http://krzychukula.blogspot.com 18
http://static.slidesharecdn.com 8
http://mezura.com.br 7
http://localhost:14002 2
https://twitter.com 2
http://dev.gobundlr.com 1
http://twitter.com 1
http://krzychukula.blogspot.de 1
http://dev.en.oreilly.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I have to begin that stuff right away !!!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 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