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
- 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.
- 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. ❄ ❄ ❄ ❅ ❆ ❄ ❆ ❅ ❄ ❅ ❄