A talk on the things we're doing to make Sass lighting fast for every user.

1. Lightning Fast Sass

2. Chris Eppstein
● Sass Core Team
● Numerous open source projects
● Open Source @ LinkedIn

3. Hashtags and Feedback
Twitter: @chriseppstein, @SassCSS
Hashtag: #fronteers15sass

4. Bro, Ruby is slow.
-DHH, probably
Yes, it is very slow.
-Matz, maybe?

5. My Stylesheet takes >1s to Compile
-Every Sass User

6. 3GHz CPU =
3,000,000,000
clock cycles
1 second is an eternity.

7. Why Ruby?
Seriously, who builds a
compiler in Ruby?

8. Why Not Ruby?
Seriously, who builds a
compiler in Ruby?

9. Why Not Ruby?
Ruby is slow.
Front-end devs don’t know it.
Ruby is losing to Node.js.

10. libSass

11. Programming Languages by Popularity

12. libSass
Java
C++ Python
Ruby
Rust
PERL C#
JS
Sass for everyone!

13. LibSass is our “Big Bet”.

14. libSass Compatibility with Ruby Sass
https://github.com/sass/libsass/labels/Bug%20-%20Confirmed
98%

15. Was it worth it?

16. Downsides of libSass
● Binary files (os/hw dependent).
● Not a language many webdevs know.
● Slower to develop new features.
● Ecosystem fragmentation

17. Sass is more than a language
Sass is a community of web
developers sharing their best
practices, code, and tools for
writing CSS.

18. libSass
java
C++ C
Ruby
Rust
PERL C#
JS
Sass for everyone!

19. JavaScript is
WEBSCALE!!!!111one!
- Ryan Dahl, I think

20. node-sass
● C++ ⇔ node.JS bridge
● npm install node-sass
● var sass = require(“node-sass”)
sass.render(...) // => CSS

21. What about Compass?
● Compass is not being ported to
libSass.
● The best parts of compass are
being recreated.
● Active Development

22. Sass modules as rubygems
Alright. Let’s do this.
npm modules

23. ● Distribute Sass modules via NPM
● Import Sass from modules
● Define Sass functions – in JS
● Global resolution of shared
dependencies.
● Deliver assets with the right URLs
Eyeglass

24. ● Node-like Importing (index.scss)
● Filesystem API
● Website: http://eyeglass.rocks/
Eyeglass

25. https://www.npmjs.com/browse/keyword/eyeglass-module

26. Install:
npm install --save-dev module-name
Use:
@import "module-name"
Using an Eyeglass Module

27. Using an Eyeglass Module Or your build tool of
choice (grunt, gulp,
etc)

28. Defining an Eyeglass Module
package.json

29. Defining an Eyeglass Module
eyeglass-exports.js

30. Writing a Sass function in JS
Signature
Return Value

31. node-sass-utils simplifies writing Sass functions in JS
Writing a Sass function in JS

32. ● sassUtils.castToSass(jsValue)
● sassUtils.castToJs(sassValue)
● class sassUtils.SassDimension
● class sassUtils.SassJsMap
● Much, much more
node-sass-utils

33. Modules with Assets (images/fonts/etc.)
Export assets from the module

34. Using Exported Assets
Import assets that you depend on!
Output a URL to assets according to
the app’s configuration.

35. Filesystem API

36. Eyeglass = nuts and bolts
Someone’s gotta do it.

37. Eyeglass Spriting
● Generate sprite maps from your
Sass files.
● Output corresponding CSS without
having to know image location or
dimensions.

38. Eyeglass Spriting

39. Eyeglass Spriting

40. Eyeglass Spriting

41. Eyeglass Spriting compared to Compass Spriting
● Works with multiple file formats
● Files can be in several
directories.
● No “Magic Import”

42. Take Aways:
● Use libSass. It’s ready.
● Use eyeglass to distribute Sass.
● No new features for Compass.
● node-sass-utils for writing Sass
functions in JS.
● Ruby Sass is not dead.

43. Q & A

44. Why not Bower?
Bower is a “front end packager”.
● No conventions.
● No framework.
● Every bower package is a
snowflake - requires devs
to know internal structure.
❄
❄
❄
❅
❆
❄
❆
❅
❄ ❅
❄