Future of Sass

1,854 views
1,775 views

Published on

My presentation at Railsconf 2012 about Sass 3.2 features, and the alpha release of libsass.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,854
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • “You did stuff like, 4 years ago, but then you just disappeared”\n
  • \n
  • consulting.\n
  • \n
  • Wikipedia infringement\nMike Godwin called me\n(Of Godwin’s Law)\nSold the product to Wikimedia\n
  • \n
  • In Ruby (merb)\nMobile project lead\n
  • \n
  • \n
  • 30 million downloads\n
  • some games...\n\n
  • Director of Engineering\nTransform Websites ... primarily to mobile\nHalf a billion pageviews through our servers every month\nWent from 4 people to 43 people in two years, without any funding\nSemi-stealth\nPROFITABLE and HIRING!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • All Nathan and Chris’ work\n
  • selector inheritance\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Really struggled with how to best make sass better\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Today with release 0.1\n
  • Release next monday\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sass to takeover world\n
  • \n
  • \n
  • Future of Sass

    1. 1. The Future of Sass @hcatlin
    2. 2. Where I’ve been
    3. 3. “You used to do all this cool stuff before, then you just disappeared.” - @ryancarson at FOWA
    4. 4. burn out :(
    5. 5. m.en.wikipedia.org
    6. 6. 1.8 billion monthly pageviews**http://stats.wikimedia.org/EN/TablesPageViewsMonthlyMobile.htm
    7. 7. On the side...
    8. 8. Dictionary! * 30 million downloads * Search as you type * Sound-alike
    9. 9. ...and more
    10. 10. Back to the Sass at Hand...
    11. 11. @nex3 @chriseppstein
    12. 12. Clear things up
    13. 13. .scss is the extension to Sass files
    14. 14. It’s Sassnot SASS
    15. 15. Sass 3.2
    16. 16. Placeholder Selectors #context a.%stronglink { color: red; font-weight: bold; } .highlight { @extend %stronglink; } --->>> #context a.highlight { color: red; font-weight: bold; }
    17. 17. Mixin Content
    18. 18. “Blocks for Mixins”
    19. 19. @mixin iphone { @media only screen and (max-width: 480px) { @content; }}@include iphone { body { color: red }}---->>>@media only screen and (max-width: 480px) { body { color: red }}
    20. 20. @media craziness
    21. 21. Load Paths• Sass.load_paths• Initialized via ENV[“SASS_PATH”]• Great for your shared library trove
    22. 22. Deprecations• 1.8.7 is now the minimum• &foo is gone • “& foo” is A OK
    23. 23. Thanks for watching!
    24. 24. ...one more thing
    25. 25. Pros and Cons
    26. 26. Pros and Cons• Mature
    27. 27. Pros and Cons• Mature• Advanced
    28. 28. Pros and Cons• Mature• Advanced • Units, Functions, Selector Inheritance....
    29. 29. Pros and Cons• Mature• Advanced • Accessibility • Units, Functions, Selector Inheritance....
    30. 30. Pros and Cons• Mature• Advanced • Accessibility • Units, Functions, • Speed Selector Inheritance....
    31. 31. Moovwebover 50k lines of Sass
    32. 32. ~30 sec to compile some projects
    33. 33. SassJS
    34. 34. SassJS
    35. 35. libsass
    36. 36. Aaron Leung@ akhleung
    37. 37. Design
    38. 38. Design• C interface, C++ internals
    39. 39. Design• C interface, C++ internals• Statically linkable
    40. 40. Design• C interface, C++ internals• Statically linkable• Small(ish)
    41. 41. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface
    42. 42. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST
    43. 43. Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST• Sass 3.1 Features
    44. 44. Development• Sponsored by Moovweb• < 2 months in• More features than we expected• Adapters Needed!
    45. 45. Stuff We Do• Mixins• Variables• Most Unit Conversions• Simple interpolation• Most Functions• Everything I use personally!
    46. 46. In 0.2• Selector Inheritance: @extends• Full Interpolation• All units
    47. 47. After that...• Color functions• Control Directives @if• Callback API
    48. 48. Benchmarks!4s3s2s1s0s Project A Project B Sass SassC
    49. 49. 4,000%
    50. 50. SassC./bin/sassc interpolation.scss > file.css SassC Wrapper Libsass
    51. 51. SassRuby SassPython Libsass Libsass SassJS Libsass
    52. 52. Integration?
    53. 53. struct sass_context* ctx = sass_new_context();ctx->input_string = "div { width: 30px; }";ctx->options.output_style = SASS_STYLE_NESTED;sass_compile(ctx);printf(ctx->output_string);sass_free_context(sass_file_context);
    54. 54. struct sass_options { int output_style; char* include_paths;};struct sass_context { char* input_string; char* output_string; struct sass_options options; int error_status; char* error_message;};
    55. 55. struct sass_file_context { char* input_path; char* output_string; struct sass_options options; int error_status; char* error_message;};struct sass_folder_context { char* search_path; char* output_path; struct sass_options options; int error_status; char* error_message;};
    56. 56. Why?
    57. 57. What can you do?• Help with SassRuby• Color functions!• Evangelize• Follow me on twitter @hcatlin and RT
    58. 58. Linkgasm• http://github.com/hcatlin/libsass• http://github.com/hcatlin/sassc• http://github.com/hcatlin/sassruby• http://twitter.com/hcatlin• Discount Code: RailsConfCatlinSASS2012

    ×