44
Lightning Fast Sass

Lightning fast sass

Embed Size (px)

Citation preview

Page 1: Lightning fast sass

Lightning Fast Sass

Page 2: Lightning fast sass

Chris Eppstein

● Sass Core Team● Numerous open source projects● Open Source @ LinkedIn

Page 3: Lightning fast sass

Hashtags and Feedback

Twitter: @chriseppstein, @SassCSS

Hashtag: #fronteers15sass

Page 4: Lightning fast sass

Bro, Ruby is slow.

-DHH, probably

Yes, it is very slow.

-Matz, maybe?

Page 5: Lightning fast sass

My Stylesheet takes >1s to Compile

-Every Sass User

Page 6: Lightning fast sass

3GHz CPU =

3,000,000,000 clock cycles

1 second is an eternity.

Page 7: Lightning fast sass

Why Ruby?

Seriously, who builds a compiler in Ruby?

Page 8: Lightning fast sass

Why Not Ruby?

Seriously, who builds a compiler in Ruby?

Page 9: Lightning fast sass

Why Not Ruby?

Ruby is slow.

Front-end devs don’t know it.

Ruby is losing to Node.js.

Page 10: Lightning fast sass

libSass

Page 11: Lightning fast sass

Programming Languages by Popularity

Page 12: Lightning fast sass

libSass

Java

C++ Python

Ruby

Rust

PERL C#

JS

Sass for everyone!

Page 13: Lightning fast sass

LibSass is our “Big Bet”.

Page 14: Lightning fast sass

libSass Compatibility with Ruby Sass

https://github.com/sass/libsass/labels/Bug%20-%20Confirmed

98%

Page 15: Lightning fast sass

Was it worth it?

Page 16: Lightning fast sass

Downsides of libSass

● Binary files (os/hw dependent).● Not a language many webdevs know.● Slower to develop new features.● Ecosystem fragmentation

Page 17: Lightning fast sass

Sass is more than a language

Sass is a community of web developers sharing their best practices, code, and tools for writing CSS.

Page 18: Lightning fast sass

libSass

java

C++ C

Ruby

Rust

PERL C#

JS

Sass for everyone!

Page 19: Lightning fast sass

JavaScript isWEBSCALE!!!!111one!

- Ryan Dahl, I think

Page 20: Lightning fast sass

node-sass

● C++ ⇔ node.JS bridge

● npm install node-sass

● var sass = require(“node-sass”)

sass.render(...) // => CSS

Page 21: Lightning fast sass

What about Compass?

● Compass is not being ported to libSass.

● The best parts of compass are being recreated.

● Active Development

Page 22: Lightning fast sass

Sass modules as rubygems

Alright. Let’s do this.

npm modules

Page 23: Lightning fast sass

● 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

Page 24: Lightning fast sass

● Node-like Importing (index.scss)

● Filesystem API

● Website: http://eyeglass.rocks/

Eyeglass

Page 26: Lightning fast sass

Install:npm install --save-dev module-name

Use:@import "module-name"

Using an Eyeglass Module

Page 27: Lightning fast sass

Using an Eyeglass Module Or your build tool of choice (grunt, gulp, etc)

Page 28: Lightning fast sass

Defining an Eyeglass Module

package.json

Page 29: Lightning fast sass

Defining an Eyeglass Module

eyeglass-exports.js

Page 30: Lightning fast sass

Writing a Sass function in JS

Signature

Return Value

Page 31: Lightning fast sass

node-sass-utils simplifies writing Sass functions in JS

Writing a Sass function in JS

Page 32: Lightning fast sass

● sassUtils.castToSass(jsValue)

● sassUtils.castToJs(sassValue)

● class sassUtils.SassDimension

● class sassUtils.SassJsMap

● Much, much more

node-sass-utils

Page 33: Lightning fast sass

Modules with Assets (images/fonts/etc.)

Export assets from the module

Page 34: Lightning fast sass

Using Exported Assets

Import assets that you depend on!

Output a URL to assets according to the app’s configuration.

Page 35: Lightning fast sass

Filesystem API

Page 36: Lightning fast sass

Eyeglass = nuts and bolts

Someone’s gotta do it.

Page 37: Lightning fast sass

Eyeglass Spriting

● Generate sprite maps from your Sass files.

● Output corresponding CSS without having to know image location or dimensions.

Page 38: Lightning fast sass

Eyeglass Spriting

Page 39: Lightning fast sass

Eyeglass Spriting

Page 40: Lightning fast sass

Eyeglass Spriting

Page 41: Lightning fast sass

Eyeglass Spriting compared to Compass Spriting

● Works with multiple file formats● Files can be in several directories.

● No “Magic Import”

Page 42: Lightning fast sass

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.

Page 43: Lightning fast sass

Q & A

Page 44: Lightning fast sass

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

❆❄

❄ ❅❄