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

1,749
-1

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,749
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
  • &amp;#x201C;You did stuff like, 4 years ago, but then you just disappeared&amp;#x201D;\n
  • \n
  • consulting.\n
  • \n
  • Wikipedia infringement\nMike Godwin called me\n(Of Godwin&amp;#x2019;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&amp;#x2019; 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

    ×