Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.
...
The trouble with CSS.
- Super long, cluttered files.
- Lots of repetitive code.
- Vendor prefixes.
- Difficult to maintain.
...
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...
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 ac...
6. Functions
SASS
CSS
Functions
- Logic! Just like real
programmers use.
< > <= => != ==
- Bonus, you can have
conditional or
looped CS...
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...
Don’t worry!
- You can refactor over time.
- Use partials and @import to
organize your Sass files.
- Tons of frameworks exi...
Partials
- A file with CSS or Sass. Starts with _ and ends with .scss
- These can be @import’ed into one main SCSS file.
_he...
Frameworks
- Plenty of libraries out there. Primarily, Compass!
Frameworks
- Background size
- Border radius
- Box shadow
- Inline block
- Opacity
- Text shadow
- Vertical rhythm
- Sprit...
SASS
CSS
Frameworks
- Compass keeps your
CSS up to date with
all the latest browser
quirks.
Demo time!
Sass that CSS
Upcoming SlideShare
Loading in …5
×

Sass that CSS

803 views

Published on

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

Published in: Design
  • Be the first to comment

Sass that CSS

  1. 1. that CSS
  2. 2. What is SASS?
  3. 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. 4. The trouble with CSS. - Super long, cluttered files. - Lots of repetitive code. - Vendor prefixes. - Difficult to maintain. - Messy!
  5. 5. But I don’t want to learn another language...
  6. 6. Sass to the rescue. - Variables! - Nesting! - Math! - Mixins! - Extends! - Functions!
  7. 7. Let’s get Sassy... 1. Variables
  8. 8. SASS CSS Variables $variable: value; - Store a value and call it elsewhere in your stylesheets. - Can be any color, number, text, etc.
  9. 9. 2. Nesting
  10. 10. SASS CSS Nesting - Clean up your CSS files with shorter selectors. - Easier to follow.
  11. 11. SASS CSS Nesting - Nesting works with multiple selectors.
  12. 12. SASS CSS Nesting - Parent selector: & For adding context within a nested area.
  13. 13. SASS CSS Nesting - Parent selector: & For adding context within a nested area. Handy when teamed up with Modernizr!
  14. 14. 3. Math
  15. 15. SASS CSS Math - Who doesn’t love math? - Smooth operators: + - * / %
  16. 16. 4. Mixins
  17. 17. SASS CSS Mixins - Reuse chunks of CSS - Start with @mixin and give it a unique name. - To apply it, add @include name
  18. 18. SASS CSS Mixins - Mixins can have variables. - Variables can also have default values.
  19. 19. 5. Extend
  20. 20. SASS CSS Extend - Abstract your CSS! - Save your HTML from being overrun by repetitive classes. - Share your CSS styles across multiple selectors.
  21. 21. 6. Functions
  22. 22. SASS CSS Functions - Logic! Just like real programmers use. < > <= => != == - Bonus, you can have conditional or looped CSS. if(), @if, @for, @while, @each
  23. 23. SASS CSS Functions - Generate CSS with loops and variables.
  24. 24. SASS CSS Functions - Write your own custom functions with: @function and @return
  25. 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. 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. 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. 28. Frameworks - Plenty of libraries out there. Primarily, Compass!
  29. 29. Frameworks - Background size - Border radius - Box shadow - Inline block - Opacity - Text shadow - Vertical rhythm - Sprites
  30. 30. SASS CSS Frameworks - Compass keeps your CSS up to date with all the latest browser quirks.
  31. 31. Demo time!

×