Pro Yearly is on sale from $80 to $50! »

Pre Processadores CSS

Pre Processadores CSS

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

Db94547ac8012906af2f81c4589651cd?s=128

Willian Justen

February 13, 2015
Tweet

Transcript

  1. Pre-processadores CSS Sass - Stylus - Less

  2. Olá! Eu sou Willian! @willian_justen github.com/willianjusten

  3. O que é pre-processador?

  4. None
  5. Escreve Código Compila Código Gerado Processo

  6. None
  7. None
  8. None
  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; }