Your SlideShare is downloading. ×
Sass that CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sass that CSS

138
views

Published on

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

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
138
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
  • 31. Demo time!