"#{$N} Things You Didn't Know Sass & Compass Could Do"

Chris Eppstein

Ask Questions!

This is an interactive slide deck.

Interpolation

Interpolation allows scripting in many non-value contexts.

  • Selectors
  • CSS directives
  • @extend arguments
  • Property Names

Interpolation can't be used to change the parse structure of a sass file.

  • Variables
  • Mixins
  • Braces/Indentation
  • Imports

In Sass script, interpolation returns a STRING.

Sass

CSS

Comments

Did you know you could put code in your comments?

Sass

CSS

Placeholder Selectors

Placeholder selectors are like an "invisible" class. They exist so that they can be extended -- They "hold the place" of the selectors that will extend them.

Sass

CSS

HTML

Result

Write your own Functions

@function allows you to re-use common calculations.

Sass

CSS

Numeric Units

  • Numbers in CSS have a physical unit.
  • If you have a room that is 10 feet long and 15 feet wide. What is the area of the room? 150 WHAT?
  • Numerical units work like algabraic variables.
  • 3x * 4y / 6x => 2y (the x's cancel)
  • 2x + 4y (can't simplify)
  • 2x + 8x => 10x
  • Sass numbers can have complex units, but they can't be output to CSS.
  • Sass will convert between units if it knows a ratio.
  • Sass doesn't care if your unit isn't defined in CSS (future-proof)
  • Percents are not mathmatical percents. They are a unit.

Sass

CSS

@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

Keyframe Animation

Sass

CSS

HTML

Result

Sprites

Sass

CSS

HTML

Result

Questions?

Sass

CSS

HTML

Result

It takes a community!

United Mitochondrial Disease Foundation

Please Donate!