Sassive Aggressive// Level Up Your CSS with Sass@import the-awesome

What is Sass?

What is Sass?Syntacticallyawesomestylesheets

We all use CSS sucks

We all use CSS sucksbut

We all use CSS sucksbut

Especially if you’ve used Sass.

Sass takes everything that’s missing from CSS

and puts it into CSS.

Sass takes everything that’s missing from CSS

and puts it into CSS.

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}

Things like…

h1 { color: $logo-color; font: 16px/1.6 Georgia; margin: 0;}

Variables

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}

Nesting

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; &.new { color: red; }}

The Ampersand

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}h2 { @extend h1; font-size: 14px;}

Selector Inheritance

h1 { color: #000; font: 16px/1.6 Georgia; margin: $default_margin * 2;}

Calculations

h1 { color: lighten(#000, 25%); font: 16px/1.6 Georgia; margin: 0;}

Color Manipulation

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; @include border-radius(4px);}

Mixins

And so, so much more.

Sass does not replace CSS.

Sass does not replace CSS.Sass makes CSS.

Sass does not replace CSS.Sass makes CSS.

better.

Three more thingsbefore we play…

What’s ?http://compass-style.org

• a framework that uses Sass• an open source project• a collection of reusable design patterns that

makes using the latest CSS features super easy

Compass is not Sass, but they are oen grouped together.

1

Two SyntaxesSCSS

2

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}

Two SyntaxesSCSS

2

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}

Two SyntaxesSCSS booooooo

2

h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}

Two SyntaxesSCSS booooooo

DISCLAIMER: Adam’s opinion of the

SCSS syntax do not represent Joel’s

opinion of the SCSS syntax.

2

h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px

Two SyntaxesSass

2

h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px

Two SyntaxesSass yaaaaaay

2

Don’t be afraid.

The Command Line3

Let’s look at some code!

NOTE: At this point, we switched to a

live code demonstration (with Sass/

SCSS on the left and auto-updating

compiled CSS on the right).

See the code:https://github.com/jayroh/sass-harvard

Note that the code samples are stored within the same !le, but on different branches. Here are the direct links to each branch:

Ampersand (Sass/SCSS)Calculations (Sass/SCSS)

Colors (Sass/SCSS)Compass (Sass/SCSS)

Extend (Sass/SCSS)Loops (Sass/SCSS)

Mixins (Sass/SCSS)Nesting (Sass/SCSS)Partials (Sass/SCSS)Responsive (Sass/SCSS)Sprites (Sass/SCSS)Variables (Sass/SCSS)

Who are these guys?

Adam DarowskiPatientsLikeMe

Joel Oliveirae47th

@adarowski@jayroh