Sass conferencia css-sp
13 likes3,966 views
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.
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
- 22. Control directives @for http://codepen.io/loumontano/pen/WbzBgz?editors=010
- 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!)