Curso CSS3 com Sass e Compass - Aula 01 - Introducão

1,054 views

Published on

Todas as aulas já publicadas: http://www.loiane.com/2012/03/curso-online-css3-com-sass-e-compass-gratuito/

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

No Downloads
Views
Total views
1,054
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Curso CSS3 com Sass e Compass - Aula 01 - Introducão

  1. 1. Curso CSS com Sass e Compass: IntroduçãoLoiane Gronerhttp://loiane.com
  2. 2. .msg { padding: 24px; }.msg h3 { padding: 24px; }
  3. 3. .msg { padding: 24px; }.msg h3 { padding: 24px; }
  4. 4. .msg { padding: 24px; }.msg h3 { padding: 24px; }
  5. 5. .msg { padding: 24px; }.msg h3 { padding: 24px; }Problemas• Repetição gera problemas para manter codigo• Relacionamentos não estão claros• Razões para tais valores estão na cabeça de quem fez odesign
  6. 6. Sass é uma extensão doCSS3 que permite que vocêcrie folhas de estilo melhorescom um esforço menor
  7. 7. De Sa ssPa ra C SS
  8. 8. SCSS - Sassy CSS (.scss)h1 { color: #000; background: #fff;}
  9. 9. Indented Sass (.sass)h1 color: #000 background: #fff
  10. 10. P ense ic am enteDin am
  11. 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. 12. D RY
  13. 13. Don’tRepeatYourself
  14. 14. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  15. 15. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  16. 16. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  17. 17. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  18. 18. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  19. 19. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  20. 20. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  21. 21. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  22. 22. Var iáv eis
  23. 23. .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; }}
  24. 24. .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; }}
  25. 25. .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; }}
  26. 26. .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; }}
  27. 27. .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; }}
  28. 28. .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; }}
  29. 29. .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; }}
  30. 30. .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; }}
  31. 31. Com Sass...• Não tem repetição -> custo de manuntenção é baixo• Variáveis deixam os relacionamentos claros• Razões para tais valores ficam evidentes
  32. 32. Ne sting
  33. 33. .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;} }
  34. 34. H er an ça
  35. 35. .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; }
  36. 36. .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 {<div class="error badError"> border-width: 3px;Erros Graves }</div>
  37. 37. .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 {<div class="error badError"> border-width: 3px;Erros Graves }</div>
  38. 38. .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 {<div class="error badError"> border-width: 3px;Erros Graves }</div>
  39. 39. M ix ins
  40. 40. .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;}
  41. 41. Im ports
  42. 42. /* projeto.scss */@import "core";@import "header", "footer"; sc ss _ core. .sc ss _ footer sc ss _h eader. projeto.css projeto.scss
  43. 43. Opera çõ es tem á tic asMa
  44. 44. Operadores MatemáticosOperadores Matemáticos (+, -, *, /, %) funcionam comnúmeros2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1
  45. 45. Divisãofont: 2px / 2px; //1pxfont: 25px / 4+1; //5pxfont: $base / 2;
  46. 46. Funções Numéricaspercentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5
  47. 47. Loo pe dic ion aisC on es Cond i ci o n a i s < > <= = > == !=›O perador else, @ e l se i f› @if, @ , @ e a ch , @w h i l e › @for › and, or
  48. 48. Operadores Relacionais (<, >, <=, >=) comparamnúmeros1 < 25 // true10 <= 30 // true3 > 2 // true3 >= 2 // trueOperacores de Comparação (==, !=) comparamqualquer tipo1 + 1 == 2 // truesmall != big // true#000 == black // true
  49. 49. red == #f00red == #ff0000red == rgb(255, 0, 0)red == rgba(255, 0, 0, 1.0)red == hsl(0deg, 100%, 100%)red == hsla(0deg, 100%, 100%, 1)
  50. 50. @if, @else, @else if$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}
  51. 51. 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; }
  52. 52. Loop @while.scss$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}.css.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }
  53. 53. Loop @each.scss@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url(/images/#{$animal}.png); }}.css.puma-icon { background-image: url(/images/puma.png); }.sea-slug-icon { background-image: url(/images/sea-slug.png); }.egret-icon { background-image: url(/images/egret.png); }.salamander-icon { background-image: url(/images/salamander.png); }
  54. 54. C ore s!
  55. 55. Função RGBA.scssa { color: rgba(blue, .75) }p { background: rgba(#ffa, .25) }.cssa { color: rgba(255, 255, 170, 0.25) }p { background: rgba(255, 255, 170, 0.25) }
  56. 56. Inspecionando Cores$color: red;hue($color); //0degsaturation($color); // 100%lightness($color); // 50%red($color); //100green($color); //0blue($color); //0alpha($color); //100
  57. 57. Manipulando Cores invert(blue) invert(blue) invert(blue)invert(blue) invert(blue) complement(#6cf620) complement(#6cf620) complement(#6cf620) complement(#6cf620) complement(#6cf620) invert(blue)invert(blue) invert(blue) invert(blue) complement(#6cf620) complement(#6cf620) co coinvert(blue) complement(#6cf620) mix(red, yellow) mix(red,yellow) mix(red,yellow, 30%) 30%) mix(red,yellow) yellow) mix(red, yellow, 30%)mix(red, yellow)mix(red, yellow) mix(red, yellow, 30%) mix(red, yellow, 30%) mix(red, yellow, mix(red,mix(red, yellow) yellow) mix(red, yellow) 30%) mi mix(red, yellow) yellow, mix(red, yellow, 30%) yellow, 30%) mimix(red, mix(red, grayscale(yellow) grayscale(yellow) grayscale(yellow)grayscale(yellow) grayscale(yellow) grayscale(yellow)grayscale(yellow)grayscale(yellow) grayscale(yellow)grayscale(yellow)
  58. 58. Manipulando HSLAadjust-hue(#77a7f9,90) adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,90)adjust-hue(#77a7f9,90 adjust-hue(#77a7f9,- adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) saturate(#9b8a60,50%) desaturate(#d9a621,50%) adjust-hue(#77 adjust-hue(#77a7f9,90) adjustsaturate(#9b8a60,50%) desaturate(#d9a621,50%) saturate(#9b8a60,50%) saturate(#9b8a60,50%) desaturate(#d9a621,5 saturate(#9b8a60,50%) desaturate(#d9a621,50%) saturate(#9b8a60,50%) darken(#6cf620,30%) desaturate(#d9a621,50%) lighten(#2e7805,50%) saturate(#9b8a saturate(#9b8a60,50%) desatu darken(#6cf620,30%) darken(#6cf620,30%) darken(#6cf620,30%) darken(#6cf620,30%) lighten(#2e7805,50%) lighten(#2e7805,50%) lighten(#2e7805,50%)
  59. 59. saturate(#9b8a saturate(#9b8a60,50%) desatur saturate(#9b8a60,50%) desaturate(#d9a621,50%)darken(#6cf620,30%) lighten(#2e7805,50%) darken(#6cf620,30%) darken(#6cf620 darken(#6cf620,30%) lighten lighten(#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(rgb fade-out(#fab, .
  60. 60. Mudar a CorPode setar qualquer propriedade de corchange-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
  61. 61. change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); #19f65d #19f65d #19f65d $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, #19f65d #19f65d #19f65d #19f65d change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100);change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100); #4288ff $saturation:100); #4288ff$saturation:100); change-color(#8e9cb3, change-color(#8e9cb3, #4288ff #4288ff #4288ff #4288ff #4288ff change-color(#6cf620, $green: 60, $blue: 100); change-color(#6cf620, $green: 60, $blue: 100);change-color(#6cf620,$green: 60,60, $blue: change-color(#6cf620, $green: 60,$blue: 100); change-color(#6cf620, $green: $blue: 100);100); #6C3C64 $green: 60, $blue: 100); #6C3C64$green: 60, $blue: 100); change-color(#6cf620, change-color(#6cf620, #6C3C64 #6C3C64 #6C3C64 #6C3C64 #6C3C64
  62. 62. Ajustar a CorPode incrementar qualquer propriedade de coradjust-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
  63. 63. adjust-color(#d3fa7b, $hue:60, $lightness:-20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); #19f65d #19f65d #19f65d adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); #19f65d #19f65dadjust-color(#5f8fe3, $green:100, $alpha: rgba(95, 255, 227, 0.75); -0.25); rgba(95, 255, 227, 0.75); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); rgba(95, 255, 227, 0.75); 0.75); rgba(95, 255, 255, 0.75); rgba(95, 227, 227,
  64. 64. Escalar a CorPode escalar em qualqer porcentagem qualquer propriedadede corscale-color($color, [$red], [$green], [$blue],[$saturation], [$lightness], [$alpha]);
  65. 65. scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); #d6fa84 #d6fa84 #d6fa84 #d6fa84 adjust-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%);adjust-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%); white white white white #d6fa84 scale-color adjust-color scale-color adjust-c adjust-color(#adf609, $lightness:50%); scale-color adjust-c white
  66. 66. Funções
  67. 67. .scss@function pxem($px, $context: 16px) { @return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }.cssarticle h2 { font-size: 2.813em; }
  68. 68. Compass is an open-source CSS Authoring Framework.
  69. 69. Coleção de MixinsFunções SassAmbienteExtensões
  70. 70. http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed
  71. 71. Funções Helperadjust-lightness, scale-lightnessadjust-saturation, scale-saturationimage-urlimage-heightimage-widthinline-imagefont-urlinline-font-filespisincostan e mais...
  72. 72. .scssheader { background: image-url(hbg.png); h1 { width: image-width(logo.png); height: image-height(logo.png); background: inline-image(logo.png) }}.cssheader { background: url(/images/hbg.png?1351...);}header h1 { width: 220px; height: 100px; background: url(data:image/png;base64...);}
  73. 73. MixinsUtilidadesBrowser Hacks, Clear!xes, ResetsEstilos para ElementosLinks, Lists, Float, Tables, TextDesign patternsTag Cloud, Sticky footer, Vertical rhythmCSS3appearance, background, gradients, background-clip background-origin, background-size, border-radius box, box-shadow,box-sizing,CSS3 PIE, columns, font-face, opacity, transform, transition, more...
  74. 74. .scss.msg {@include background(linear-gradient(#fff, #eee)); @include border-radius(5px);} .css.msg {background: -webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%, #ffffff), color-stop(100%, #eeeeee));background: -webkit-linear-gradient(#ffffff, #eeeeee);background: -moz-linear-gradient(#ffffff, #eeeeee);background: -ms-linear-gradient(#ffffff, #eeeeee);background: linear-gradient(#ffffff, #eeeeee);-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px; }
  75. 75. Plugins e ExtensõesFancy Buttons, Sassy Buttons - botões CSS3Animate - lib para animação em CSS3RGBApng - Gerar alpha pngs a partir do SassCompass Magick - Renderiza gradientes CSS3Gradients para png
  76. 76. Qu emusa?
  77. 77. Referências Sasshttp://sass-lang.com/http://sass-lang.com/docs/yardoc/ file.SASS_REFERENCE.htmlhttp://thesassway.com/
  78. 78. Referências Compasshttp://compass-style.org/http://compass-style.org/reference/ compass/
  79. 79. http://groups.google.com/ group/sass-lang
  80. 80. .contato { email: ‘curso@extjs4.com’; blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’; }
  81. 81. Obrigada!

×