Lightning fast sass
-
Upload
chriseppstein -
Category
Software
-
view
2.458 -
download
2
Transcript of Lightning fast sass
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 features.● Ecosystem fragmentation
Sass is more than a language
Sass is a community of web developers sharing their best practices, code, and tools for writing CSS.
libSass
java
C++ C
Ruby
Rust
PERL C#
JS
Sass for everyone!
JavaScript isWEBSCALE!!!!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 Development
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
dependencies.
● Deliver assets with the right URLs
Eyeglass
● 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.SassJsMap
● Much, much more
node-sass-utils
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 location or dimensions.
Eyeglass Spriting
Eyeglass Spriting
Eyeglass Spriting
Eyeglass Spriting compared to Compass Spriting
● Works with multiple file formats● Files can be in several directories.
● No “Magic Import”
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.
Q & A
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.❄
❄
❄
❅
❆❄
❆
❅
❄ ❅❄