sass that css

that CSS

What is SASS?

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

— Hampton CatlinOriginally wrote Sass

The trouble with CSS.- Super long, cluttered files.- Lots of repetitive code.- Vendor prefixes.- Difficult to maintain.- Messy!

But I don’t want to learn another language...

Sass to the rescue.- Variables!- Nesting!- Math!

- Mixins!- Extends!- Functions!

Let’s get Sassy...

1. Variables

SASS

CSS

Variables$variable: value;

- Store a value and call it elsewhere in your stylesheets.

- Can be any color, number, text, etc.

2. Nesting

SASS

CSS

Nesting- Clean up your CSS

files with shorter selectors.

- Easier to follow.

SASS

CSS

Nesting- Nesting works with

multiple selectors.

SASS

CSS

Nesting- Parent selector: &

For adding context within a nested area.

SASS

CSS

Nesting- Parent selector: &

For adding context within a nested area.

Handy when teamed up with Modernizr!

3. Math

SASS

CSS

Math- Who doesn’t love

math?

- Smooth operators:+ - * / %

4. Mixins

SASS

CSS

Mixins- Reuse chunks of CSS

- Start with @mixin and give it a unique name.

- To apply it, add @include name

SASS

CSS

Mixins- Mixins can have

variables.

- Variables can also have default values.

5. Extend

SASS

CSS

Extend- Abstract your CSS!

- Save your HTML from being overrun by repetitive classes.

- Share your CSS styles across multiple selectors.

6. Functions

SASS

CSS

Functions- Logic! Just like real

programmers use.< > <= => != ==

- Bonus, you can have conditional or looped CSS.if(), @if, @for, @while, @each

SASS

CSS

Functions- Generate CSS with

loops and variables.

SASS

CSS

Functions- Write your own

custom functions with: @function and @return

This seems like a lot...- Where do I even begin?- How do I keep all this organized?- I have to use TERMINAL..?!- Never mind, I’m switching back to

print design.

Don’t worry!- You can refactor over time.- Use partials and @import to

organize your Sass files.- Tons of frameworks exist!- Not to mention plenty of compiler GUIs.

Partials- A file with CSS or Sass. Starts with _ and ends with .scss

- These can be @import’ed into one main SCSS file.

_header.scss

_footer.scss

_body.scss style.scss style.css

Frameworks- Plenty of libraries out there. Primarily, Compass!

Frameworks- Background size

- Border radius

- Box shadow

- Inline block

- Opacity

- Text shadow

- Vertical rhythm

- Sprites

SASS

CSS

Frameworks- Compass keeps your

CSS up to date with all the latest browser quirks.

Demo time!