I'm Tab Atkins

and I work at Google.

a, b {
	i, j {
		x, y {
			...
		}
	}
}

a i x, a i x, a j x, a j y,
b i x, b i y, b j x, b j y {
	...
}

.error { /* stuff */ }
.serious-error {
	@extend .error;
	/* more stuff */
}

.error, .serious-error { /* stuff */ }
.serious-error {
	/* more stuff */
}

a b c { ... }
x y {
	@extend c;
}

a b c,
x a b y, a x b y, a b x y,
ax b y, a bx y { ... }

a, b {
	i, j {
		x, y {
			...
		}
	}
}

:matches(a,b) :matches(i,j) :matches(x,y) {
	...
}

a b c { ... }
x y {
	@extend c;
}

a b c, x y:matches(a b y) { ... }

Variables

foo {
	--bar: literally anything;
}

CSS Extensions

@custom-media --small-screen (max-width: 25em);
@media (--small-screen) {
	...
}

<script>CSS.customMedia.set("--date", ...);</script>

@media (--date: 20141002) and (1100 <= --time < 1150) {
	...
}

foo {
	color: --lighter(red);
}

@--mixin foo(x, y, z) { ... }
div.bar {
	@--include foo(1, 2, 3);
}

Questions?