Future of Sass

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 ﬁles

It’s Sassnot SASS

Sass 3.2

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

Mixin Content

“Blocks for Mixins”

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

@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 Inheritance....

Moovwebover 50k lines of Sass

~30 sec to compile some projects

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_STYLE_NESTED;sass_compile(ctx);printf(ctx->output_string);sass_free_context(sass_file_context);

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

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

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://twitter.com/hcatlin• Discount Code: RailsConfCatlinSASS2012

http://lanyrd.com	205
http://coderwall.com	4
http://www.hanrss.com	1

Future of Sass

by Hampton Catlin

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 210

Statistics

Future of Sass Presentation Transcript

Future of Sass

by Hampton Catlin

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 210

Statistics

Future of Sass Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare