Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Sass conferencia css-sp
Ähnlich wie Sass conferencia css-sp (20)
Sass conferencia css-sp
- 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
- 24. ./Useful Mixins
- 25. Clearfix
- 26. Vertical align
- 27. Media Queries - Breakpoints
- 28. Grids
- 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!)