Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass conferencia css-sp

3,451 views

Published on

Sass conferencia css-sp

  1. 1. ./Oi! eu sou Lourdes Presentation Code Developer @ R/GA Buenos Aires @loumontano
  2. 2. ./Agenda ./ What is Sass ./ Setup ./ File structure ./ Features ./ Useful Mixins ./ Good practices
  3. 3. ./A Quick note about Sass
  4. 4. File structure Partials - Sub-files compiled in one single CSS file @import - Defines the output order on the compiled CSS
  5. 5. ./Features
  6. 6. Sass Features - Variables - Nesting - Mixins - Extends / Placeholders - Math Operators - Functions - Control directives - Maps - and more!
  7. 7. Variables - Same as other languages (placeholder name, scope, etc.) - Can use: color values, texts, booleans, numbers, etc.
  8. 8. Nesting - Easy to read. Faster to write - Follow the 3 or 4 nesting levels rule (check generated CSS)
  9. 9. ./Reusability
  10. 10. @mixin - CSS rules that you can reuse - Use with dynamic values - Very useful for vendor prefixes - Used for reuse rules, not values
  11. 11. @extend - For properties sharing without parameters - Con: it’s also generated on the CSS output
  12. 12. @extend + %placeholder - Placeholders don’t get compiled on the CSS output - Can be used via @extend
  13. 13. ./Functions
  14. 14. Math operators
  15. 15. Native Sass Functions - Support math operators - HSL color functions available (Hue, Saturation, Lightness & Opacity)
  16. 16. Custom functions - Allow calculations - Unlike @mixin, there is a @return for a value
  17. 17. ./Control directives
  18. 18. Control directives @if
  19. 19. Control directives @for http://codepen.io/loumontano/pen/WbzBgz?editors=010
  20. 20. Control directives @each
  21. 21. ./Useful Mixins
  22. 22. Clearfix
  23. 23. Vertical align
  24. 24. Media Queries - Breakpoints
  25. 25. Grids
  26. 26. Animations http://codepen.io/loumontano/pen/eJByH
  27. 27. Transitions
  28. 28. - Key/Value data sets - Unique list of keys - Access to the keys and values - Ability to iterate through these values
  29. 29. ./Good practices
  30. 30. 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
  31. 31. Manejo responsable de Sass
  32. 32. 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
  33. 33. 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!)
  34. 34. 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/
  35. 35. ./Valeu! @loumontano

×