QConSP 2012: CSS3 com Sass e Compass

download QConSP 2012: CSS3 com Sass e Compass

of 49

  • date post

    19-Jun-2015
  • Category

    Technology

  • view

    930
  • download

    4

Embed Size (px)

Transcript of QConSP 2012: CSS3 com Sass e Compass

  • 1. CSS 3 com Sass e CompassLoiane Groner@loiane

2. .msg { padding: 24px; }.msg h3 {padding: 24px; } 3. .msg { padding: 24px; }.msg h3 {padding: 24px; } 4. .msg { padding: 24px; }.msg h3 {padding: 24px; } 5. .msg { padding: 24px; }.msg h3 {padding: 24px; }Problemas Repetio gera problemas para manter codigo Relacionamentos no esto claros Razes para tais valores esto na cabea de quem fez odesign 6. Sass uma extenso doCSS3 que permite que voccrie folhas de estilo melhorescom um esforo menor 7. DontRepeatYourself 8. Var iv eis 9. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 10. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 11. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 12. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 13. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 14. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 15. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 16. .scss.css$blue: #3bbfce;$margin: 16px;/* CSS */.content-navigation { .content-navigation {border-color: $blue;border-color: #3bbfce;color:color: #2b9eab;darken($blue, 9%);}}.border {.border { padding: 8px;padding: $margin / 2; margin: 8px;margin: $margin / 2;border-color: #3bbfce;border-color: $blue;}} 17. Com Sass... No tem repetio -> custo de manunteno baixo Variveis deixam os relacionamentos claros Razes para tais valores cam evidentes 18. Ne sting 19. .scss .csstable.hl { /* CSS */margin: 2em 0;td.ln {table.hl {text-align: right; margin: 2em 0;}}}table.hl td.ln { text-align: right;li { }font: { family: serif;li { weight: bold; font-family: serif; size: 1.2em;font-weight: bold;}font-size: 1.2em;}} 20. H er an a 21. .scss .css.error { /* CSS */border: 1px #f00;background: #fdd;.error, .badError {}border: 1px #f00;.error.intrusion { background: #fdd;font-size: 1.3em;}font-weight: bold;}.error.intrusion, .badError.intrusion {.badError {font-size: 1.3em;@extend .error;font-weight: bold;border-width: 3px; }} .badError { border-width: 3px; } 22. .scss.css .error {/* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion {background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px;} } .badError {

border-width: 3px;Erros Graves }

23. .scss.css .error {/* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion {background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px;} } .badError {

border-width: 3px;Erros Graves }

24. .scss.css .error {/* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion {background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px;} } .badError {

border-width: 3px;Erros Graves }

25. M ix ins 26. .scss .css@mixin table-base {th {/* CSS */text-align: center;font-weight: bold;#data {} float: left;td, th {padding: 2px} margin-left: 10px;} }#data th {@mixin left($dist) {text-align: center;float: left;font-weight: bold;margin-left: $dist; }} #data td, #data th {padding: 2px;#data { }@include left(10px);@include table-base;} 27. Im ports 28. /* projeto.scss */@import "core";@import "header", "footer";sc ss_ core. .scss_ footersc ss_h eader. projeto.cssprojeto.scss 29. Opera es tem tic asMa 30. Operadores MatemticosOperadores Matemticos (+, -, *, /, %) funcionam comnmeros2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19% 3; //1 31. Funes Numricaspercentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5 32. Loo pe dic ion aisC ones Cond i ci o n a i s < > == !=Operadorelse, @e l se i f @if, @, @ e a ch , @w h i l e @for and, or 33. Operadores Relacionais (, =) comparamnmeros1 < 25 // true10 2 // true3 >= 2// trueOperacores de Comparao (==, !=) comparamqualquer tipo1 + 1 == 2// truesmall != big// true#000 == black // true 34. Loop @for.scss@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }}.css.item-1 {width: 2em; }.item-2 {width: 4em; }.item-3 {width: 6em; } 35. C ore s! 36. saturate(#9b8asaturate(#9b8a60,50%) desatursaturate(#9b8a60,50%) desaturate(#d9a621,50%)darken(#6cf620,30%) lighten(#2e7805,50%)darken(#6cf620,30%) darken(#6cf620darken(#6cf620,30%) lightenlighten(#2e7805,50%)fade-out(#fab, .5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgbfade-out(#fab, . 37. Funes 38. .scss@function pxem($px, $context: 16px) {@return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }.cssarticle h2 { font-size: 2.813em; } 39. Compass is an open-source CSS Authoring Framework. 40. Coleo de MixinsFunes SassAmbienteExtenses 41. http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed 42. Qu emusa? 43. Obrigada!Loiane Groner@loiane