Weitere ähnliche Inhalte Ähnlich wie Curso CSS3 com Sass e Compass - Aula 01 - Introducão (20) Kürzlich hochgeladen (20) Curso CSS3 com Sass e Compass - Aula 01 - Introducão1. Curso
CSS com
Sass e Compass:
Introdução
Loiane Groner
http://loiane.com
6. .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 o
design
8. Sass é uma extensão do
CSS3 que permite que você
crie folhas de estilo melhores
com um esforço menor
10. SCSS - Sassy CSS (.scss)
h1 {
color: #000;
background: #fff;
}
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; }
}
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. .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. .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. .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. .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. .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. .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; }
}
32. .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; }
}
33. 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
35. .scss .css
table.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;
} }
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 {
border-width: 3px;
}
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. .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>
40. .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>
42. .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;
}
44. /* projeto.scss */
@import "core";
@import "header", "footer";
sc ss
_ core.
.sc ss
_ footer
sc ss
_h eader.
projeto.css
projeto.scss
49. Loo pe
dic ion ais
C 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
50. Operadores Relacionais (<, >, <=, >=) comparam
números
1 < 25 // true
10 <= 30 // true
3 > 2 // true
3 >= 2 // true
Operacores de Comparação (==, !=) comparam
qualquer tipo
1 + 1 == 2 // true
small != big // true
#000 == black // true
51. red == #f00
red == #ff0000
red == rgb(255, 0, 0)
red == rgba(255, 0, 0, 1.0)
red == hsl(0deg, 100%, 100%)
red == hsla(0deg, 100%, 100%, 1)
52. @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;
}
}
53. 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; }
54. 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; }
55. 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'); }
57. Função RGBA
.scss
a { color: rgba(blue, .75) }
p { background: rgba(#ffa, .25) }
.css
a { color: rgba(255, 255, 170, 0.25) }
p { background: rgba(255, 255, 170, 0.25) }
59. 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
co
invert(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%) mi
mix(red, mix(red,
grayscale(yellow)
grayscale(yellow)
grayscale(yellow)
grayscale(yellow) grayscale(yellow)
grayscale(yellow)
grayscale(yellow)
grayscale(yellow) grayscale(yellow)
grayscale(yellow)
60. Manipulando HSLA
adjust-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) adjust
saturate(#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%)
61. 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, .
62. Mudar a Cor
Pode setar qualquer propriedade de cor
change-color($color, [$red], [$green], [$blue],
[$hue], [$saturation], [$lightness], [$alpha]);
63. 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
64. Ajustar a Cor
Pode incrementar qualquer propriedade de cor
adjust-color($color, [$red], [$green], [$blue],
[$hue], [$saturation], [$lightness], [$alpha]);
65. 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
#19f65d
adjust-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,
66. Escalar a Cor
Pode escalar em qualqer porcentagem qualquer propriedade
de cor
scale-color($color, [$red], [$green], [$blue],
[$saturation], [$lightness], [$alpha]);
67. 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
73. http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
fonts_dir = "fonts"
javascripts_dir = "javascripts"
output_style = :compressed
75. .scss
header {
background: image-url('hbg.png');
h1 { width: image-width('logo.png');
height: image-height('logo.png');
background: inline-image('logo.png')
}
}
.css
header {
background: url('/images/hbg.png?1351...');
}
header h1 { width: 220px; height: 100px;
background: url('data:image/png;base64...');
}
76. Mixins
Utilidades
Browser Hacks, Clear!xes, Resets
Estilos para Elementos
Links, Lists, Float, Tables, Text
Design patterns
Tag Cloud, Sticky footer, Vertical rhythm
CSS3
appearance, background, gradients, background-clip background-
origin, background-size, border-radius box, box-shadow,box-sizing,
CSS3 PIE, columns, font-face, opacity, transform, transition, more...
77. .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; }
78. Plugins e Extensões
Fancy Buttons, Sassy Buttons - botões CSS3
Animate - lib para animação em CSS3
RGBApng - Gerar alpha pngs a partir do Sass
Compass Magick - Renderiza gradientes CSS3
Gradients para png
86. .contato {
email: ‘curso@extjs4.com’;
blog: ‘loiane.com’;
facebook: ‘facebook.com/loianegroner’;
twitter: ‘@loiane’;
github: ‘loiane’;
vimeo: ‘loiane’;
youtube: ‘loianeg’;
}