The document discusses the future of Sass and introduces libsass, a C implementation of the Sass compiler. Some key points: - Libsass allows Sass to be compiled 2-4,000% faster than other implementations like Ruby Sass. It has a C interface and aims to support Sass 3.1 features. - Development is led by Hicatlin and sponsored by Moovweb. The 0.2 release will include selector inheritance and full interpolation. - Libsass has a small code size, is statically linkable, and provides a simple compiler API for integrating with other languages like Ruby, Python, and JavaScript. - Future work includes adding more functions

1. The Future of Sass
@hcatlin

2. Where I’ve been

3. “You used to do all this
cool stuff before, then
you just disappeared.”
- @ryancarson at FOWA

4. burn out :(

8. m.en.wikipedia.org

9. 1.8 billion monthly
pageviews*
*http://stats.wikimedia.org/EN/TablesPageViewsMonthlyMobile.htm

10. On the side...

11. Dictionary!
* 30 million downloads
* Search as you type
* Sound-alike

12. ...and more

14. Back to the Sass at
Hand...

15. @nex3
@chriseppstein

16. Clear things up

17. .scss is the extension to
Sass files

18. It’s Sass
not SASS

19. Sass 3.2

20. Placeholder Selectors
#context a.%stronglink {
color: red;
font-weight: bold; }
.highlight {
@extend %stronglink; }
--->>>
#context a.highlight {
color: red;
font-weight: bold; }

21. Mixin Content

22. “Blocks for Mixins”

23. @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 }
}

24. @media craziness

25. Load Paths
• Sass.load_paths
• Initialized via ENV[“SASS_PATH”]
• Great for your shared library trove

26. Deprecations
• 1.8.7 is now the minimum
• &foo is gone
• “& foo” is A OK

27. Thanks for watching!

28. ...one more thing

29. Pros and Cons

30. Pros and Cons
• Mature

31. Pros and Cons
• Mature
• Advanced

32. Pros and Cons
• Mature
• Advanced
• Units,
Functions,
Selector
Inheritance....

33. Pros and Cons
• Mature
• Advanced
• Accessibility
• Units,
Functions,
Selector
Inheritance....

34. Pros and Cons
• Mature
• Advanced
• Accessibility
• Units,
Functions, • Speed
Selector
Inheritance....

35. Moovweb
over 50k lines of Sass

36. ~30 sec to compile
some projects

37. SassJS

38. SassJS

40. libsass

41. Aaron
Leung
@ akhleung

42. Design

43. Design
• C interface, C++ internals

44. Design
• C interface, C++ internals
• Statically linkable

45. Design
• C interface, C++ internals
• Statically linkable
• Small(ish)

46. Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
• Simple Interface

47. Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
• Simple Interface
• FAST

48. Design
• C interface, C++ internals
• Statically linkable
• Small(ish)
• Simple Interface
• FAST
• Sass 3.1 Features

49. Development
• Sponsored by Moovweb
• < 2 months in
• More features than we expected
• Adapters Needed!

50. Stuff We Do
• Mixins
• Variables
• Most Unit Conversions
• Simple interpolation
• Most Functions
• Everything I use personally!

51. In 0.2
• Selector Inheritance: @extends
• Full Interpolation
• All units

52. After that...
• Color functions
• Control Directives @if
• Callback API

53. Benchmarks!
4s
3s
2s
1s
0s
Project A Project B
Sass SassC

54. 4,000%

55. SassC
./bin/sassc interpolation.scss > file.css
SassC Wrapper
Libsass

56. SassRuby SassPython
Libsass Libsass
SassJS
Libsass

57. Integration?

58. 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);

59. 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;
};

60. 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;
};

61. Why?

62. What can you do?
• Help with SassRuby
• Color functions!
• Evangelize
• Follow me on twitter @hcatlin and RT

63. Linkgasm
• http://github.com/hcatlin/libsass
• http://github.com/hcatlin/sassc
• http://github.com/hcatlin/sassruby
• http://twitter.com/hcatlin
• Discount Code: RailsConfCatlinSASS2012