Lightning Fast Sass
Chris Eppstein
● Sass Core Team
● Numerous open source projects
● Open Source @ LinkedIn
Hashtags and Feedback
Twitter: @chriseppstein, @SassCSS
Hashtag: #fronteers15sass
Bro, Ruby is slow.
-DHH, probably
Yes, it is very slow.
-Matz, maybe?
My Stylesheet takes >1s to Compile
-Every Sass User
3GHz CPU =
3,000,000,000
clock cycles
1 second is an eternity.
Why Ruby?
Seriously, who builds a
compiler in Ruby?
Why Not Ruby?
Seriously, who builds a
compiler in Ruby?
Why Not Ruby?
Ruby is slow.
Front-end devs don’t know it.
Ruby is losing to Node.js.
libSass
Programming Languages by Popularity
libSass
Java
C++ Python
Ruby
Rust
PERL C#
JS
Sass for everyone!
LibSass is our “Big Bet”.
libSass Compatibility with Ruby Sass
https://github.com/sass/libsass/labels/Bug%20-%20Confirmed
98%
Was it worth it?
Downsides of libSass
● Binary files (os/hw dependent).
● Not a language many webdevs know.
● Slower to develop new feature...
Sass is more than a language
Sass is a community of web
developers sharing their best
practices, code, and tools for
writi...
libSass
java
C++ C
Ruby
Rust
PERL C#
JS
Sass for everyone!
JavaScript is
WEBSCALE!!!!111one!
- Ryan Dahl, I think
node-sass
● C++ ⇔ node.JS bridge
● npm install node-sass
● var sass = require(“node-sass”)
sass.render(...) // => CSS
What about Compass?
● Compass is not being ported to
libSass.
● The best parts of compass are
being recreated.
● Active De...
Sass modules as rubygems
Alright. Let’s do this.
npm modules
● Distribute Sass modules via NPM
● Import Sass from modules
● Define Sass functions – in JS
● Global resolution of shared...
● Node-like Importing (index.scss)
● Filesystem API
● Website: http://eyeglass.rocks/
Eyeglass
https://www.npmjs.com/browse/keyword/eyeglass-module
Install:
npm install --save-dev module-name
Use:
@import "module-name"
Using an Eyeglass Module
Using an Eyeglass Module Or your build tool of
choice (grunt, gulp,
etc)
Defining an Eyeglass Module
package.json
Defining an Eyeglass Module
eyeglass-exports.js
Writing a Sass function in JS
Signature
Return Value
node-sass-utils simplifies writing Sass functions in JS
Writing a Sass function in JS
● sassUtils.castToSass(jsValue)
● sassUtils.castToJs(sassValue)
● class sassUtils.SassDimension
● class sassUtils.SassJsMa...
Modules with Assets (images/fonts/etc.)
Export assets from the module
Using Exported Assets
Import assets that you depend on!
Output a URL to assets according to
the app’s configuration.
Filesystem API
Eyeglass = nuts and bolts
Someone’s gotta do it.
Eyeglass Spriting
● Generate sprite maps from your
Sass files.
● Output corresponding CSS without
having to know image loc...
Eyeglass Spriting
Eyeglass Spriting
Eyeglass Spriting
Eyeglass Spriting compared to Compass Spriting
● Works with multiple file formats
● Files can be in several
directories.
●...
Take Aways:
● Use libSass. It’s ready.
● Use eyeglass to distribute Sass.
● No new features for Compass.
● node-sass-utils...
Q & A
Why not Bower?
Bower is a “front end packager”.
● No conventions.
● No framework.
● Every bower package is a
snowflake - r...
Prochain SlideShare
Chargement dans…5
×

Lightning fast sass

2 782 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

Lightning fast sass

  1. 1. Lightning Fast Sass
  2. 2. Chris Eppstein ● Sass Core Team ● Numerous open source projects ● Open Source @ LinkedIn
  3. 3. Hashtags and Feedback Twitter: @chriseppstein, @SassCSS Hashtag: #fronteers15sass
  4. 4. Bro, Ruby is slow. -DHH, probably Yes, it is very slow. -Matz, maybe?
  5. 5. My Stylesheet takes >1s to Compile -Every Sass User
  6. 6. 3GHz CPU = 3,000,000,000 clock cycles 1 second is an eternity.
  7. 7. Why Ruby? Seriously, who builds a compiler in Ruby?
  8. 8. Why Not Ruby? Seriously, who builds a compiler in Ruby?
  9. 9. Why Not Ruby? Ruby is slow. Front-end devs don’t know it. Ruby is losing to Node.js.
  10. 10. libSass
  11. 11. Programming Languages by Popularity
  12. 12. libSass Java C++ Python Ruby Rust PERL C# JS Sass for everyone!
  13. 13. LibSass is our “Big Bet”.
  14. 14. libSass Compatibility with Ruby Sass https://github.com/sass/libsass/labels/Bug%20-%20Confirmed 98%
  15. 15. Was it worth it?
  16. 16. Downsides of libSass ● Binary files (os/hw dependent). ● Not a language many webdevs know. ● Slower to develop new features. ● Ecosystem fragmentation
  17. 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. 18. libSass java C++ C Ruby Rust PERL C# JS Sass for everyone!
  19. 19. JavaScript is WEBSCALE!!!!111one! - Ryan Dahl, I think
  20. 20. node-sass ● C++ ⇔ node.JS bridge ● npm install node-sass ● var sass = require(“node-sass”) sass.render(...) // => CSS
  21. 21. What about Compass? ● Compass is not being ported to libSass. ● The best parts of compass are being recreated. ● Active Development
  22. 22. Sass modules as rubygems Alright. Let’s do this. npm modules
  23. 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. 24. ● Node-like Importing (index.scss) ● Filesystem API ● Website: http://eyeglass.rocks/ Eyeglass
  25. 25. https://www.npmjs.com/browse/keyword/eyeglass-module
  26. 26. Install: npm install --save-dev module-name Use: @import "module-name" Using an Eyeglass Module
  27. 27. Using an Eyeglass Module Or your build tool of choice (grunt, gulp, etc)
  28. 28. Defining an Eyeglass Module package.json
  29. 29. Defining an Eyeglass Module eyeglass-exports.js
  30. 30. Writing a Sass function in JS Signature Return Value
  31. 31. node-sass-utils simplifies writing Sass functions in JS Writing a Sass function in JS
  32. 32. ● sassUtils.castToSass(jsValue) ● sassUtils.castToJs(sassValue) ● class sassUtils.SassDimension ● class sassUtils.SassJsMap ● Much, much more node-sass-utils
  33. 33. Modules with Assets (images/fonts/etc.) Export assets from the module
  34. 34. Using Exported Assets Import assets that you depend on! Output a URL to assets according to the app’s configuration.
  35. 35. Filesystem API
  36. 36. Eyeglass = nuts and bolts Someone’s gotta do it.
  37. 37. Eyeglass Spriting ● Generate sprite maps from your Sass files. ● Output corresponding CSS without having to know image location or dimensions.
  38. 38. Eyeglass Spriting
  39. 39. Eyeglass Spriting
  40. 40. Eyeglass Spriting
  41. 41. Eyeglass Spriting compared to Compass Spriting ● Works with multiple file formats ● Files can be in several directories. ● No “Magic Import”
  42. 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. 43. Q & A
  44. 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. ❄ ❄ ❄ ❅ ❆ ❄ ❆ ❅ ❄ ❅ ❄

×