Pre Processadores CSS

Uma breve explicação sobre pre-processadores e suas similariedades.

Transcript

1. Pre-processadores CSS Sass - Stylus - Less
2. Olá! Eu sou Willian! @willian_justen github.com/willianjusten
3. O que é pre-processador?
5. Escreve Código Compila Código Gerado Processo
9. Qual é o melhor? NENHUM!
10. Mas por quê? • Cerca de 80% das funcionalidades tem em todos!!! • A diferença é somente em opções mais avançadas • O melhor é aquele que se encaixa no seu workflow
11. Como usar?
12. Sass $ gem install sass $ sass style.scss style.css
13. Less $ npm install -g less $ lessc style.less style.css
14. Stylus $ npm install -g stylus $ stylus style.styl
15. Sintaxe Sass $primary: #0899B1; $secondary: #CE1413; body { background: $primary; color: $secondary; } Less @primary: #0899B1; @secondary: #CE1413; body { background: @primary; color: @secondary; } Stylus primary = #0899B1 secondary = #CE1413 body background primary color secondary
16. Iniciante
17. Variáveis - Sass $primary: #0899B1; $secondary: #CE1413; body { background: $primary; color: $secondary; }
18. Variáveis - Less @primary: #0899B1; @secondary: #CE1413; body { background: @primary; color: @secondary; }
19. Variáveis - Stylus primary = #0899B1 secondary = #CE1413 body background primary color secondary
20. Nesting - Sass nav { width: 400px; ul { list-style: none; } li { background: #FF0000; } a { color: #FFFFFF; &:hover{ color: #CCCCCC; } } } nav { width: 400px; } nav ul { list-style: none; } nav li { background: #FF0000; } nav a { color: #FFFFFF; } nav a:hover { color: #CCCCCC; }
21. Nesting - Less nav { width: 400px; ul { list-style: none; } li { background: #FF0000; } a { color: #FFFFFF; &:hover{ color: #CCCCCC; } } } nav { width: 400px; } nav ul { list-style: none; } nav li { background: #FF0000; } nav a { color: #FFFFFF; } nav a:hover { color: #CCCCCC; }
22. Nesting - Stylus nav width 400px ul list-style none li background #FF0000 a color #FFFFFF &:hover color #CCCCCC nav { width: 400px; } nav ul { list-style: none; } nav li { background: #FF0000; } nav a { color: #FFFFFF; } nav a:hover { color: #CCCCCC; }
23. Cuidado com a especificidade!!! nav { width: 400px; ul { list-style: none; li { background: #FF0000; a { color: #FFFFFF; &:hover{ color: #CCCCCC; } } } } } nav { width: 400px; } nav ul { list-style: none; } nav ul li { background: #FF0000; } nav ul li a { color: #FFFFFF; } nav ul li a:hover { color: #CCCCCC; }
24. Import @import "normalize"; @import "base"; @import "buttons"; @import “typo”;
25. Intermediário
26. Mixins - Sass @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
27. Mixins - Less .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius; } .box { .border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
28. Mixins - Stylus border-radius radius -webkit-border-radius radius -moz-border-radius radius -ms-border-radius radius border-radius radius .box border-radius 10px .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
29. Extend - Sass .box { width: 200px; height: 300px; } .box-red { @extend .box; background: #FF0000; } .box-blue { @extend .box; background: #0000FF; } .box, .box-red, .box-blue { width: 200px; height: 300px; } .box-red { background: #FF0000; } .box-blue { background: #0000FF; }
30. Extend - Less .box, .box-red, .box-blue { width: 200px; height: 300px; } .box-red { background: #FF0000; } .box-blue { background: #0000FF; } .box { width: 200px; height: 300px; } .box-red { &:extend(.box); background: #FF0000; } .box-blue { &:extend(.box); background: #0000FF; }
31. Extend - Stylus .box, .box-red, .box-blue { width: 200px; height: 300px; } .box-red { background: #FF0000; } .box-blue { background: #0000FF; } .box width 200px height 300px .box-red @extend .box background #FF0000 .box-blue @extend .box background #0000FF
32. Placeholder + Extend- Sass %box { width: 200px; height: 300px; } .box-red { @extend %box; background: #FF0000; } .box-blue { @extend %box; background: #0000FF; } .box-red, .box-blue { width: 200px; height: 300px; } .box-red { background: #FF0000; } .box-blue { background: #0000FF; }
33. Placeholder + Extend- Stylus .box-red, .box-blue { width: 200px; height: 300px; } .box-red { background: #FF0000; } .box-blue { background: #0000FF; } %box width 200px height 300px .box-red @extend %box background #FF0000 .box-blue @extend %box background #0000FF
34. Avançado
35. Functions - Sass @function calc-percent($target, $container) { @return ($target / $container) * 100%; } .my-module { width: calc-percent(650px, 1000px); }
36. Functions - Less .calc-percent(@target, @container) { (@target / @container) * 100%; } .my-module { width: .calc-percent(650px, 1000px); }
37. Functions - Stylus cp(target, container) (target / $container) * 100% .my-module width cp(650px, 1000px)
38. Color Functions - Sass rgba($color, $alpha) hue($color) saturation($color) lightness($color) lighten($color, $percentage) darken($color, $percentage) saturate($color, $percentage) desaturate($color, $percentage) grayscale($color) complement($color) invert($color)
39. Color Functions - Less lighten(@color, @percentage) darken(@color, @percentage) saturate(@color, @percentage) desaturate(@color, @percentage) fadein(@color, @percentage) fadeout(@color, @percentage) fade(@color, @percentage) spin(@color, @percentage)
40. Color Functions - Stylus rgba(color, alpha) hue(color) saturation(color) lightness(color) lighten(color, percentage) darken(color, percentage) saturate(color, percentage) desaturate(color, percentage) invert(color)
41. Existem várias built-in functions em cada um deles! Procure na documentação!
42. Control Directives - Sass @if @else @else if @then @for @each @while
43. Control Directives - Less when
44. Control Directives - Stylus if else else if unless for in
45. If, else - Sass @mixin buttons($color, $type) { @if $type == ‘flat' { background-color: $color; @else if $type == ‘gradient' { background: linear-gradient($color, darken($color, 20%)); } @else if $type == ‘glossy' { background: linear-gradient($color, darken($color, 20%) 50%); @else { background-color: $color; } } .button { @include buttons(green, glossy); }
46. when - Less .buttons(@color, @type) when (@type == ‘flat’) { background-color: $color; } .buttons(@color, @type) when (@type == ‘gradient’) { background: linear-gradient($color, darken($color, 20%)); } .buttons(@color, @type) when (@type == ‘glossy’) { background: linear-gradient($color, darken($color, 20%) 50%); } .button { .buttons(green, glossy); }
47. if,else - Stylus buttons($color, $type) { if type == ‘flat' background-color color else if type == ‘gradient' background linear-gradient(color, darken(color, 20%)) else if $type == ‘glossy' background linear-gradient(color, darken($color, 20%) 50%) else background-color color .button buttons(green, glossy)
48. for loop - Sass for $i from 1px to 5px { .border-#{$i} { border: $i solid #000; } } .border-1px { border: 1px solid #000; } .border-2px { border: 2px solid #000; } .border-3px { border: 3px solid #000; } .border-4px { border: 4px solid #000; } .border-5px { border: 5px solid #000; }