RailsConf 2012: The Future of Sass

Talk by @hcatlin

Where he’s been?
Was doing lots of cool stuff, but not telling anyone
Burn out.
 
Wikipedia iPhone app
m.en.wikipedia.org
1.8 billion monthly page views
 
Dictionary app
Search as you type & sound-alike
 
Now at MOOVWEB
 
Sass is all headed up by @nex3 and @chriseppstein
 
Let’s clear some things up
 
.scss is the extension to Sass files
Indented Sass will remain supported, but scss is the markup style
 
It’s Sass not SASS
It’s a “backronym” not an “acronym”
 
Sass 3.2

Placeholder Selectors
 
#context a.%stronglink {
  color: red;
  font-weight: bold;
}
 
.highlight {
  @extend %stronglink;
}
 
Outputs:
 
#context a.highlight {
  color: red;
  font-weight: bold;
}
 
% in selector will never print out. So you can start with that and use it elsewhere in your file.
 
Mixin Content
aka “Blocks for Mixins”
 
@mixin iphone {
  @media only screen and (max-width: 480px) [
    @content;
  }
}
 
@include iPhone {
  body { color: red; }
}
 
outputs:
 
@media only screen and (max-width: 480px) {
  body { color: red; }
}
 
@content is effectively the same as “yield”
 
Load Paths

Sass.load_paths
Initialized via ENV[“SASS_PATH”]
Great for a shared library trove
Compass will use this in the future
 
Deprecations
 
1.8.7 is now the minimum Ruby usable
 
&foo is gone, but & foo is ok (must have a space)
Use @extends instead of this
 
“One More Thing”
Pros and Cons
 
Sass is (pros):
  • Mature
  • Advanced (not many undoable things)
    • Units
    • Functions
    • Selector inheritance
Cons:
  • Accessibility 
    • getting designers to use command line, setup GUIs on the side, difficult to get up and running
    • Less won on this one with Javascript drop and run
  • Speed
    • Moovweb has over 50k lines of Sass
    • average 30 seconds to compile, caching helps here
Announce: SassJS (kidding)
 
Really: libsass; implemented Sass in C.
Aaron Leung (@akhleung) built this
 
libsass
C interface, C++ internals
Statically linkable
Small(ish)
Simple interface
FAST
Sass 3.1 features currently, 3.2 coming eventually
 
Development was sponsored by Moovweb
Less than 2 months in
More features than expected
Adapters needed!
 
Mixins just work
Variables are good
Most conversions
Simple interpolations (some edge cases don’t work)
Most functions work (problems with color functions)
 
Coming soon (0.2+)
Selector inheritance
Full Interpolation
All units
Color functions
Control directives @if
Callback API
 
Benchmarks MUCH faster. ~100 Milliseconds compared to seconds
 
 
SassC
./bin/sassc interpolation.scss > file.css
 
SassC is an executable project wrapper around Libsass
 
Plan to have SassRuby, SassPython, and SassJS all wrap around libsass
SassPython and SassJS don’t exist yet, but the they are wanted
SassGo is another he wants
 
Integrating C API

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->outptu_string);
sass_free_fontext(sass_file_context);
 
[overview of C structs]
 
Why?
Make web design have the same level of tools of software development
 
How you can help
Color Functions (if you know C/C++)
Help on SassRuby
Evangelize!
 
http://github.com/hcatlin/libsass
http://github.com/hcatlin/sassc
http://github.com/hcatlin/sassruby