Palestra pré processadores CSS

1,141 views

Published on

Overview dos principais pré-processadores (pre-process) de CSS. Less, Compass, Saas. Daniel Santos - Developer na Just Digital

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
552
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Palestra pré processadores CSS

  1. 1. Pré-processadores {CSS} por: Daniel Santos Developer
  2. 2. Por que usar um Pré-processador?
  3. 3. Pré-processadores ❏ Mixins ❏ Extend ❏ Variables ❏ Helpers ❏ Operations ❏ Media ❏ Functions ❏ Nesting ❏ Importing ❏ Conditions ❏ Color function
  4. 4. Qual pré-processador usar?
  5. 5. Compilando Less no tempo de execução <link rel=”stylesheet/less” type=”text/css” href=”style.less” /> <script type=”text/javascript” src=”js/less-1.1.3.min.js”></script>
  6. 6. Compilando Less para um arquivo .css $ sudo apt-get install npm $ sudo apt-get install node-less $ npm install -g less $ lessc style.less > style.css
  7. 7. EXEMPLO Less @import Mixins Parametric Mixins Nested
  8. 8. @import url("http://fonts.googleapis.com/css?family=Joti+One"); .radius (@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .texto{ text-align: center; font-family: 'Joti One'; margin: 0; font-weight: bold; }
  9. 9. @import "mixin.less"; .body{ background: hardlight(#ff6600, #cccccc); margin: 0 auto; padding: 20px; width: 960px; height: 400px; .radius(100px 60px 10px 75px); } h1{ .texto; color: negation(#ff6600, #cccccc); margin-bottom: 50px; font-size: 40px; } p{ .texto; color: difference(#ff6600, #0000ff); font-size: 20px; }
  10. 10. EXEMPLO Sass @import $variables @Extend
  11. 11. @import url("http://fonts.googleapis.com/css?family=Underdog") $preto: #000 $azul: #0000ff $rosa: #ff00cc body margin: 0 padding: 0 background: $preto h1 color: $azul font-family: 'Underdog' font-weight: bold text-align: center font-size: 60px p @extend h1 font-size: 20px font-weight: normal color: $rosa
  12. 12. @import url("http://fonts.googleapis.com/css?family=Underdog"); body { margin: 0; padding: 0; background: black; } body h1, body p { color: blue; font-family: "Underdog"; font-weight: bold; text-align: center; font-size: 60px; } body p { font-size: 20px; font-weight: normal; color: #ff00cc; }
  13. 13. Algumas bibliotecas do Saas?
  14. 14. EXEMPLO Compass @Import Helpers $Variables Operations @Mixin @if, @else if, @else @for
  15. 15. @import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre") @import "compass/css3" $black : #000 $white : #fff $paragrafo : #a2c999 - 40 @mixin condicao($teste: true) @if $teste == false font-family: 'Averia Sans Libre' font-size: 40px color: $white text-align: center margin: 0 0 35px 0 @else if $teste == 1 font-size: 30px color: $paragrafo text-align: center font-weight: normal font-family: arial margin: 0 0 35px 0 @else font-size: 70px color: #0000ff + $paragrafo font-family: "Courier New" margin: 0
  16. 16. @import mixin .content background: $black +border-radius(25px 60px 0 40px) width: 960px height: 300px margin: 0 auto h1 +condicao(false) p +condicao(1) .paragrafo +condicao
  17. 17. @import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre"); .content { background: black; -webkit-border-radius: 25px 60px 0 40px; -moz-border-radius: 25px 60px 0 40px; -ms-border-radius: 25px 60px 0 40px; -o-border-radius: 25px 60px 0 40px; border-radius: 25px 60px 0 40px; width: 960px; height: 300px; margin: 0 auto; } .content h1 { font-family: "Averia Sans Libre"; font-size: 40px; color: white; text-align: center; margin: 0 0 35px 0; } .content p { font-size: 30px; color: #7aa171; text-align: center; font-weight: normal; font-family: arial; margin: 0 0 35px 0; } .content .paragrafo { font-size: 70px; color: #7aa1ff; font-family: "Courier New"; margin: 0; }
  18. 18. @import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre") @import "compass/css3" $branco : #fff $verde : #00ff00 $circulo: #0000ff - 80 $class: teste_for !default @for $i from 1 through 2 .#{$class}_#{$i} width: 100% height: 40px background: $circulo margin-bottom: 40px +border-radius(40px)
  19. 19. @import mixin .content background: $branco +box-shadow($verde 6px 6px 40px) width: 960px height: 400px margin: 0 auto padding-top: 30px
  20. 20. @import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre"); .teste_for_1 { width: 100%; height: 40px; background: #0000af; margin-bottom: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } .teste_for_2 { width: 100%; height: 40px; background: #0000af; margin-bottom: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } .content { background: white; -webkit-box-shadow: green 6px 6px 40px; -moz-box-shadow: green 6px 6px 40px; box-shadow: green 6px 6px 40px; width: 960px; height: 400px; margin: 0 auto; padding-top: 30px; }
  21. 21. @import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre"); .teste_for_1 { width: 100%; height: 40px; background: #0000af; margin-bottom: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } .teste_for_2 { width: 100%; height: 40px; background: #0000af; margin-bottom: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } .content { background: white; -webkit-box-shadow: green 6px 6px 40px; -moz-box-shadow: green 6px 6px 40px; box-shadow: green 6px 6px 40px; width: 960px; height: 400px; margin: 0 auto; padding-top: 30px; }
  22. 22. OBRIGADO!!! Daniel Santos Developer code@justdigital.com.br +55(11)5181-5170 www.justdigital.com.br http://blog.justdigital.com.br

×