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

❄

❄

❅

❆❄

❆

❅

❄ ❅❄