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.
The Future of Sass       @hcatlin
Where I’ve been
“You used to do all this cool stuff before, then you just disappeared.”  - @ryancarson at FOWA
burn out :(
m.en.wikipedia.org
1.8 billion monthly    pageviews**http://stats.wikimedia.org/EN/TablesPageViewsMonthlyMobile.htm
On the side...
Dictionary!              * 30 million downloads              * Search as you type              * Sound-alike
...and more
Back to the Sass at      Hand...
@nex3        @chriseppstein
Clear things up
.scss is the extension to         Sass files
It’s Sassnot SASS
Sass 3.2
Placeholder Selectors  #context a.%stronglink {    color: red;    font-weight: bold; }  .highlight {    @extend %stronglin...
Mixin Content
“Blocks for Mixins”
@mixin iphone {  @media only screen and (max-width: 480px) {    @content;  }}@include iphone {  body { color: red }}---->>...
@media craziness
Load Paths• Sass.load_paths• Initialized via ENV[“SASS_PATH”]• Great for your shared library trove
Deprecations• 1.8.7 is now the minimum• &foo is gone • “& foo” is A OK
Thanks for watching!
...one more thing
Pros and Cons
Pros and Cons• Mature
Pros and Cons• Mature• Advanced
Pros and Cons• Mature• Advanced • Units,   Functions,   Selector   Inheritance....
Pros and Cons• Mature• Advanced                     • Accessibility • Units,   Functions,   Selector   Inheritance....
Pros and Cons• Mature• Advanced                     • Accessibility • Units,   Functions,        • Speed   Selector   Inhe...
Moovwebover 50k lines of Sass
~30 sec to compile  some projects
SassJS
SassJS
libsass
Aaron  Leung@ akhleung
Design
Design• C interface, C++ internals
Design• C interface, C++ internals• Statically linkable
Design• C interface, C++ internals• Statically linkable• Small(ish)
Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface
Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST
Design• C interface, C++ internals• Statically linkable• Small(ish)• Simple Interface• FAST• Sass 3.1 Features
Development• Sponsored by Moovweb• < 2 months in• More features than we expected• Adapters Needed!
Stuff We Do• Mixins• Variables• Most Unit Conversions• Simple interpolation• Most Functions• Everything I use personally!
In 0.2• Selector Inheritance: @extends• Full Interpolation• All units
After that...• Color functions• Control Directives @if• Callback API
Benchmarks!4s3s2s1s0s     Project A       Project B           Sass   SassC
4,000%
SassC./bin/sassc interpolation.scss > file.css            SassC Wrapper                 Libsass
SassRuby                 SassPython    Libsass                  Libsass              SassJS                   Libsass
Integration?
struct sass_context* ctx = sass_new_context();ctx->input_string = "div { width: 30px; }";ctx->options.output_style = SASS_...
struct sass_options {   int output_style;   char* include_paths;};struct sass_context {   char* input_string;   char* outp...
struct sass_file_context {   char* input_path;   char* output_string;   struct sass_options options;   int error_status;  ...
Why?
What can you do?• Help with SassRuby• Color functions!• Evangelize• Follow me on twitter @hcatlin and RT
Linkgasm• http://github.com/hcatlin/libsass• http://github.com/hcatlin/sassc• http://github.com/hcatlin/sassruby• http://t...
Future of Sass
Future of Sass
Future of Sass
Future of Sass
Future of Sass
Upcoming SlideShare
Loading in …5
×

Future of Sass

2,008 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×