What's new in Sass & Compass?

Who am I?

Chris Eppstein

Creator of Compass

Sass Core Developer

Engineer @ LinkedIn

Husband & Father

Ask Questions!

This is an interactive slide deck.

What's in Sass 3.3?

Source Maps

String Functions

Map Data Structure

Expanded use of & in Selectors

Variable Scoping (Part 1)

What's in Sass 3.4 (so far)?

Variable Scoping (Part 2)

& in SassScript

Selector Functions

Scientific Notation

What's in Compass 1.0?

Browser Support using caniuse.com

Compass Core Library

Source Maps (Sass 3.3)

Problem: Generated JS and CSS are hard to debug.


Solution: Sourcemaps tell a browser how to find the exact point in the real source of a generated Javascript or CSS file for use by developer tools.

Source Maps: Setup (Sass 3.3)

Compile your stylesheets with sourcemaps enabled:

(Thanks to the Google Chrome Team!!!)

Source Maps (Sass 3.3)

Paul Irish's Demo

Walk through by Addy Osmani

Sass

CSS

HTML

Result

String Manipulation Functions (Sass 3.3)

New String Functions in Sass:

  • str-length($string) - Return the length of a string
  • str-index($string, $sub-string) - Find the location of a string inside another string.
  • str-insert($string, $to-insert, $position) - insert a string into another string
  • str-slice($string, $position, $length) - extract a sub-string from another.
  • to-upper-case($string, $position, $length) - CAPITALIZE!
  • to-lower-case($string, $position, $length) - no caps

Sass

CSS

Map Data Structure (Sass 3.3)

Maps make it easy to associate data!

Sass

CSS

Meta Scripting (Sass 3.3)

Sass

CSS

Expanded Use of & in Selectors (Sass 3.3)

Sass

CSS

@at-root Directive

@at-root Directive (Sass 3.3)

Sass

CSS

Variable Scoping (Sass 3.3/3.4)

Local Variables will override globals.

Use !global to assign to a global from a local scope.

Setting a global from a local scope without !global is deprecated in 3.3

Sass

CSS

New Color: rebeccapurple

Sass

CSS

HTML

Result

& in SassScript (3.4)

Sass

CSS

Scientific Notation (3.4)

Sass

CSS

@error Directive (3.4)

Sass

CSS

Compass Prefixing

Compass prefixing is based on caniuse.com data.

Sass

CSS

Compass Core

$ gem install compass-core --pre
$ sass -r compass-core --update scss:css

_project-setup.scss

Compass Core

some_file.scss

It takes a community!

<3 LinkedIn

We're Hiring Sass Developers!

United Mitochondrial Disease Foundation

Please Donate!

Questions?

Sass

CSS

HTML

Result