Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pre Processadores CSS

Pre Processadores CSS

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

Willian Justen

February 13, 2015
Tweet

More Decks by Willian Justen

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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; }
  4. 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; }
  5. 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; }
  6. 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; }
  7. 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; }
  8. 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; }
  9. 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; }
  10. 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; }
  11. 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; }
  12. 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
  13. 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; }
  14. 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
  15. Functions - Sass @function calc-percent($target, $container) { @return ($target /

    $container) * 100%; } .my-module { width: calc-percent(650px, 1000px); }
  16. Functions - Less .calc-percent(@target, @container) { (@target / @container) *

    100%; } .my-module { width: .calc-percent(650px, 1000px); }
  17. 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)
  18. 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)
  19. 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)
  20. 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); }
  21. 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); }
  22. 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)
  23. 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; }