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