Sass that CSS

32
that CSS

description

Intro to SASS presentation at the UC Davis web designers meeting. If only you could see the animated gifs!

Transcript of Sass that CSS

Page 1: Sass that CSS

that CSS

Page 2: Sass that CSS

What is SASS?

Page 3: Sass that CSS

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

Page 4: Sass that CSS

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

Page 5: Sass that CSS

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

Page 6: Sass that CSS

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

- Mixins!- Extends!- Functions!

Page 7: Sass that CSS

Let’s get Sassy...

1. Variables

Page 8: Sass that CSS

SASS

CSS

Variables$variable: value;

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

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

Page 9: Sass that CSS

2. Nesting

Page 10: Sass that CSS

SASS

CSS

Nesting- Clean up your CSS

files with shorter selectors.

- Easier to follow.

Page 11: Sass that CSS

SASS

CSS

Nesting- Nesting works with

multiple selectors.

Page 12: Sass that CSS

SASS

CSS

Nesting- Parent selector: &

For adding context within a nested area.

Page 13: Sass that CSS

SASS

CSS

Nesting- Parent selector: &

For adding context within a nested area.

Handy when teamed up with Modernizr!

Page 14: Sass that CSS

3. Math

Page 15: Sass that CSS

SASS

CSS

Math- Who doesn’t love

math?

- Smooth operators:+ - * / %

Page 16: Sass that CSS

4. Mixins

Page 17: Sass that CSS

SASS

CSS

Mixins- Reuse chunks of CSS

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

- To apply it, add @include name

Page 18: Sass that CSS

SASS

CSS

Mixins- Mixins can have

variables.

- Variables can also have default values.

Page 19: Sass that CSS

5. Extend

Page 20: Sass that CSS

SASS

CSS

Extend- Abstract your CSS!

- Save your HTML from being overrun by repetitive classes.

- Share your CSS styles across multiple selectors.

Page 21: Sass that CSS

6. Functions

Page 22: Sass that CSS

SASS

CSS

Functions- Logic! Just like real

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

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

Page 23: Sass that CSS

SASS

CSS

Functions- Generate CSS with

loops and variables.

Page 24: Sass that CSS

SASS

CSS

Functions- Write your own

custom functions with: @function and @return

Page 25: Sass that CSS

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.

Page 26: Sass that CSS

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.

Page 27: Sass that CSS

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

Page 28: Sass that CSS

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

Page 29: Sass that CSS

Frameworks- Background size

- Border radius

- Box shadow

- Inline block

- Opacity

- Text shadow

- Vertical rhythm

- Sprites

Page 30: Sass that CSS

SASS

CSS

Frameworks- Compass keeps your

CSS up to date with all the latest browser quirks.

Page 31: Sass that CSS
Page 32: Sass that CSS

Demo time!