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

1. that CSS

2. What is SASS?

3. Sass makes CSS fun again.
Sass is CSS, plus nested rules,
variables, mixins, and more,
all in a concise, readable syntax.
— Hampton Catlin
Originally wrote Sass

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

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

6. Sass to the
rescue.
- Variables!
- Nesting!
- Math!
- Mixins!
- Extends!
- Functions!

7. Let’s get Sassy...
1. Variables

8. SASS
CSS
Variables
$variable: value;
- Store a value and
call it elsewhere in
your stylesheets.
- Can be any color,
number, text, etc.

9. 2. Nesting

10. SASS
CSS
Nesting
- Clean up your CSS
files with shorter
selectors.
- Easier to follow.

11. SASS
CSS
Nesting
- Nesting works with
multiple selectors.

12. SASS
CSS
Nesting
- Parent selector: &
For adding context
within a nested area.

13. SASS
CSS
Nesting
- Parent selector: &
For adding context
within a nested area.
Handy when teamed
up with Modernizr!

14. 3. Math

15. SASS
CSS
Math
- Who doesn’t love
math?
- Smooth operators:
+ - * / %

16. 4. Mixins

17. SASS
CSS
Mixins
- Reuse chunks of CSS
- Start with @mixin
and give it a unique
name.
- To apply it, add
@include name

18. SASS
CSS
Mixins
- Mixins can have
variables.
- Variables can also
have default values.

19. 5. Extend

20. SASS
CSS
Extend
- Abstract your CSS!
- Save your HTML
from being overrun
by repetitive classes.
- Share your CSS
styles across
multiple selectors.

21. 6. Functions

22. SASS
CSS
Functions
- Logic! Just like real
programmers use.
< > <= => != ==
- Bonus, you can have
conditional or
looped CSS.
if(), @if, @for,
@while, @each

23. SASS
CSS
Functions
- Generate CSS with
loops and variables.

24. SASS
CSS
Functions
- Write your own
custom functions
with: @function and
@return

25. 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.

26. 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.

27. 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

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

29. Frameworks
- Background size
- Border radius
- Box shadow
- Inline block
- Opacity
- Text shadow
- Vertical rhythm
- Sprites

30. SASS
CSS
Frameworks
- Compass keeps your
CSS up to date with
all the latest browser
quirks.

32. Demo time!