Sass is a CSS preprocessor that adds powerful features like variables, nesting, mixins, and functions to regular CSS. It allows for more organized and reusable CSS code. This document outlines Sass features like variables, nesting, mixins, extends, functions, control directives, and maps. It provides examples of useful mixins like clearfix, vertical align, media queries, and grids. It recommends best practices like good file structure, proper variable usage, limiting nesting, and checking the compiled CSS output.

2. ./Oi! eu sou Lourdes
Presentation Code Developer
@ R/GA Buenos Aires
@loumontano

3. ./Agenda
./ What is Sass
./ Setup
./ File structure
./ Features
./ Useful Mixins
./ Good practices

4. ./A Quick note about Sass

6. File structure
Partials - Sub-files compiled in one single CSS file
@import - Defines the output order on the compiled CSS

7. ./Features

9. Sass Features
- Variables
- Nesting
- Mixins
- Extends / Placeholders
- Math Operators
- Functions
- Control directives
- Maps
- and more!

10. Variables
- Same as other languages (placeholder name, scope, etc.)
- Can use: color values, texts, booleans, numbers, etc.

11. Nesting
- Easy to read. Faster to write
- Follow the 3 or 4 nesting levels rule (check generated CSS)

12. ./Reusability

13. @mixin
- CSS rules that you can reuse
- Use with dynamic values
- Very useful for vendor prefixes
- Used for reuse rules, not values

14. @extend
- For properties sharing without parameters
- Con: it’s also generated on the CSS output

15. @extend + %placeholder
- Placeholders don’t get compiled on the CSS output
- Can be used via @extend

16. ./Functions

17. Math operators

18. Native Sass Functions
- Support math operators
- HSL color functions available (Hue, Saturation, Lightness & Opacity)

19. Custom functions
- Allow calculations
- Unlike @mixin, there is a @return for a value

20. ./Control directives

21. Control directives @if

22. Control directives @for
http://codepen.io/loumontano/pen/WbzBgz?editors=010

23. Control directives @each

24. ./Useful Mixins

25. Clearfix

26. Vertical align

27. Media Queries - Breakpoints

28. Grids

29. Animations
http://codepen.io/loumontano/pen/eJByH

30. Transitions

32. - Key/Value data sets
- Unique list of keys
- Access to the keys and values
- Ability to iterate through these values

37. ./Good practices

38. Think of a preprocessor as
a magnifying glass: it can
make good CSS great, but
bad CSS terrible. It’s not a
magic bullet.
Harry Roberts

39. Manejo responsable de Sass

40. The Good Sass dev Checklist
- Good file structure
- Proper variable usage
- Use mixins for dynamic values, otherwise use extend
- Use functions for calculations
- Limit nesting: 3 or 4 levels max
- Like in CSS, avoid specificity
- Check CSS output

41. Final thoughts
- Good for CSS code organization
- Allows functions and variables handling
- Tons of documentation available
- Check CSS output
- Sass helps you to write CSS faster, not better. (that’s up to you!)

42. Links
http://sass-lang.com/
http://terrificwebdesign.net/converting-css-sass/
http://thesassway.com/advanced
http://sass-guidelin.es/
http://sass-compatibility.github.io/
http://sassmeister.com/
http://thesassway.com/
http://www.sitepoint.com/html-css/css/sass-css/
http://jaredhardy.com/sassy-buttons/
http://bourbon.io/

43. ./Valeu!
@loumontano