Lightning fast sass
•
5 likes•4,178 views
- libSass is a C/C++ implementation of Sass that compiles Sass much faster than the Ruby implementation. It allows Sass to be used by more developers and integrated with JavaScript build tools. - Eyeglass is a Node.js module that allows Sass modules to be distributed through npm and imported into Sass files. It provides file system access and tools for defining Sass functions in JavaScript. - Eyeglass aims to recreate popular Compass features like sprites and make them compatible with libSass and distributed through npm modules. This will provide an ecosystem for shared Sass code and assets without relying on Ruby.
Report
Share
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. ❄ ❄ ❄ ❅ ❆ ❄ ❆ ❅ ❄ ❅ ❄