./Oi! eu sou Lourdes
Presentation Code Developer
@ R/GA Buenos Aires
@loumontano
./Agenda
./ What is Sass
./ Setup
./ File structure
./ Features
./ Useful Mixins
./ Good practices
./A Quick note about Sass
File structure
Partials - Sub-files compiled in one single CSS file
@import - Defines the output order on the compiled CSS
./Features
Sass Features
- Variables
- Nesting
- Mixins
- Extends / Placeholders
- Math Operators
- Functions
- Control directives
- ...
Variables
- Same as other languages (placeholder name, scope, etc.)
- Can use: color values, texts, booleans, numbers, etc.
Nesting
- Easy to read. Faster to write
- Follow the 3 or 4 nesting levels rule (check generated CSS)
./Reusability
@mixin
- CSS rules that you can reuse
- Use with dynamic values
- Very useful for vendor prefixes
- Used for reuse rules, ...
@extend
- For properties sharing without parameters
- Con: it’s also generated on the CSS output
@extend + %placeholder
- Placeholders don’t get compiled on the CSS output
- Can be used via @extend
./Functions
Math operators
Native Sass Functions
- Support math operators
- HSL color functions available (Hue, Saturation, Lightness & Opacity)
Custom functions
- Allow calculations
- Unlike @mixin, there is a @return for a value
./Control directives
Control directives @if
Control directives @for
http://codepen.io/loumontano/pen/WbzBgz?editors=010
Control directives @each
./Useful Mixins
Clearfix
Vertical align
Media Queries - Breakpoints
Grids
Animations
http://codepen.io/loumontano/pen/eJByH
Transitions
- Key/Value data sets
- Unique list of keys
- Access to the keys and values
- Ability to iterate through these values
./Good practices
Think of a preprocessor as
a magnifying glass: it can
make good CSS great, but
bad CSS terrible. It’s not a
magic bullet.
...
Manejo responsable de Sass
The Good Sass dev Checklist
- Good file structure
- Proper variable usage
- Use mixins for dynamic values, otherwise use e...
Final thoughts
- Good for CSS code organization
- Allows functions and variables handling
- Tons of documentation availabl...
Links
http://sass-lang.com/
http://terrificwebdesign.net/converting-css-sass/
http://thesassway.com/advanced
http://sass-g...
./Valeu!
@loumontano
Sass conferencia css-sp
Sass conferencia css-sp
Sass conferencia css-sp
Sass conferencia css-sp
Sass conferencia css-sp
Sass conferencia css-sp
Sass conferencia css-sp
Sass conferencia css-sp
Próximos SlideShares
Carregando em…5
×

Sass conferencia css-sp

3.214 visualizações

Publicada em

1 comentário
12 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
3.214
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.188
Ações
Compartilhamentos
0
Downloads
35
Comentários
1
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×