Sass that CSS

476 views
280 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
476
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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!

×