What's New in
Sass & Compass

Chris Eppstein

Who am I?

Creator & Maintainer of Compass

Sass Core Developer

Architect Caring.com

Husband & Father

Sass Community Organizer & Evangelist

My Fourth Major Sass Release

Sass 2.2 (July 2009): Sass gets brains.

Mixins with Arguments, Loops & Conditionals, Interpolation, Scoped Variables, Booleans, REPL, & more.

Sass 3.0 (May 2010): Sass comes back to its CSS roots

SCSS, @extend, color functions, $ variables and : for assignment, CSS3 superset.

Sass 3.1 (April 2011): Smarter and more polished

@function, Keyword Arguments, Basic @media support, Proper lists & @each, Application integration.

Sass 3.2 (Soon): CSS3 gets smarter, Sass makes it work like it should.

  • First class @media support
  • Context abstractions with @content blocks
  • Inheritance (@extend) improvements
  • Variable length argument lists

Sass 4.0 & Beyond (2013): A peek at the future

Play with the code!

This is an interactive slide deck.

Placeholder Selectors

Sass

CSS

HTML

Result

@extend Warnings (will become errors after 3.2)

a > %placeholder { color: red; }
.base-class { color: red; }

.foo {
  @extend %placeholder;       // No warning
  @extend .base-class;        // No warning
  @extend .missing;           // Warning
  @extend .missing !optional; // No warning
}

Epic @media Support

Sass

CSS

HTML

Result

Mixin Content

Sass

CSS

HTML

Result

Variable Arguments (Under Development)

Sass

CSS

shadowed-1, .shadowed-2 { width: 50px; height: 50px; background: white; margin: 50px auto; } .shadowed-1 { -webkit-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red; -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red; box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red; } .shadowed-2 { -webkit-box-shadow: 0 0 20px black, 20px 15px 30px purple, -20px 15px 30px teal, -20px -15px 30px orange, 20px -15px 30px brown; -moz-box-shadow: 0 0 20px black, 20px 15px 30px purple, -20px 15px 30px teal, -20px -15px 30px orange, 20px -15px 30px brown; box-shadow: 0 0 20px black, 20px 15px 30px purple, -20px 15px 30px teal, -20px -15px 30px orange, 20px -15px 30px brown; margin-top: 150px; }

HTML

Result

Compass 0.13

Goodbye Blueprint

Goodbye Blueprint

Thank you for inspiring a movement!

Goodbye Blueprint

But we have to move on.

Goodbye Blueprint

You're just too rigid and confining.

Goodbye Blueprint

We need to respond to our multi-device world.

Goodbye Blueprint

It's a plugin now.
Blog Post

Goodbye Blueprint

What do we recommend?

Keyframe Animation

Sass

CSS

HTML

Result

Sass 4.0 & Beyond

Sass 4.0 & Beyond

Accommodate CSS improvements

Sass 4.0 & Beyond

Output Optimization

Sass 4.0 & Beyond

Modules/Namespacing

Sass 4.0 & Beyond

Scripting with &

Sass 4.0 & Beyond

Maps

Sass 4.0 & Beyond

Improved List & String APIs

Sass 4.0 & Beyond

New Website!

It takes a community!

United Mitochondrial Disease Foundation

Please Donate!